imeik-bizui 2.8.1 → 2.8.3

package/dist/bizui/src/FieldPersonBudgetBoard/core/PersonBudgetDetailPanel.vue

@@ -7,19 +7,17 @@
   <div v-loading="bootLoading" :class="['pbd', `pbd--${variant}`]">
     <div v-if="bootError" class="pbd-error">{{ bootError }}</div>
     <template v-else-if="overview">
-      <div :class="['pbd-state', stateClass]">{{ stateText }}</div>
-
       <section class="pbd-stats" aria-label="预算汇总">
         <div class="pbd-stat">
-          <div class="pbd-stat__value num">{{ formatMoney(overview.budgetAmount) }}</div>
+          <div class="pbd-stat__value num">{{ formatMoneyYuan(overview.budgetAmount) }}</div>
           <div class="pbd-stat__label">总预算</div>
         </div>
         <div class="pbd-stat" :class="{ 'is-used-danger': isForbid }">
-          <div class="pbd-stat__value num">{{ formatMoney(overview.usedAmount) }}</div>
+          <div class="pbd-stat__value num">{{ formatMoneyYuan(overview.usedAmount) }}</div>
           <div class="pbd-stat__label">已使用</div>
         </div>
         <div class="pbd-stat" :class="{ 'is-remain-danger': remainDanger }">
-          <div class="pbd-stat__value num">{{ formatMoney(overview.remainingAmountWithCurrent) }}</div>
+          <div class="pbd-stat__value num">{{ formatMoneyYuan(overview.remainingAmountWithCurrent) }}</div>
           <div class="pbd-stat__label">剩余可用</div>
         </div>
       </section>
@@ -109,7 +107,7 @@
           </div>
           <div class="pbd-total pbd-total--usage">
             <span>{{ usageTotalLabel }}</span>
-            <strong>¥{{ formatMoneyPlain(usageTotalAmount) }}</strong>
+            <strong>{{ formatMoneyYuan(usageTotalAmount) }}</strong>
           </div>
         </section>
 
@@ -194,7 +192,7 @@
           </div>
           <div class="pbd-total pbd-total--perf">
             <span>{{ performanceTotalLabel }}</span>
-            <strong>¥{{ formatMoneyPlain(performanceTotalAmount) }}</strong>
+            <strong>{{ formatMoneyYuan(performanceTotalAmount) }}</strong>
           </div>
         </section>
       </div>
@@ -212,8 +210,8 @@
 import {
   BUDGET_STATUS,
   formatDateTime,
-  formatMoney,
   formatMoneyPlain,
+  formatMoneyYuan,
   normalizeBudgetStatus,
   parseAmount
 } from './format'
@@ -290,21 +288,6 @@ export default {
     isForbid() {
       return this.status === BUDGET_STATUS.FORBID
     },
-    stateClass() {
-      if (this.status === BUDGET_STATUS.FORBID) return 'is-deny'
-      if (this.status === BUDGET_STATUS.WARN) return 'is-warn'
-      return 'is-pass'
-    },
-    stateText() {
-      const remain = parseAmount(this.overview && this.overview.remainingAmountWithCurrent)
-      if (this.status === BUDGET_STATUS.FORBID) {
-        const over = Number.isFinite(remain) && remain < 0 ? ` · 超出 ${formatMoney(String(Math.abs(remain)))}` : ''
-        return `已超预算${over}`
-      }
-      if (this.status === BUDGET_STATUS.WARN) return '预算预警 · 本年累计使用已超过预警值'
-      if (this.status === BUDGET_STATUS.PASS) return '预算正常 · 本年累计使用未超过预警值'
-      return (this.overview && this.overview.message) || '预算状态待确认'
-    },
     remainDanger() {
       const n = parseAmount(this.overview && this.overview.remainingAmountWithCurrent)
       return Number.isFinite(n) && n < 0
@@ -365,7 +348,7 @@ export default {
     }
   },
   methods: {
-    formatMoney,
+    formatMoneyYuan,
     formatMoneyPlain,
     formatDateTime,
     usageDateText(row) {
@@ -584,17 +567,6 @@ export default {
   color: #cf1322;
   font-size: 13px;
 }
-.pbd-state {
-  padding: 7px 12px;
-  margin-bottom: 12px;
-  border-radius: 6px;
-  font-size: 12px;
-  line-height: 18px;
-  word-break: break-word;
-  &.is-pass { background: #f6ffed; color: #237804; }
-  &.is-warn { background: #fffbe6; color: #d46b08; }
-  &.is-deny { background: #fff1f0; color: #cf1322; }
-}
 .pbd-stats {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));

package/dist/bizui/src/FieldPersonBudgetBoard/core/PersonBudgetOverview.vue

@@ -1,6 +1,6 @@
 <!--
-  个人预算概述看板 UI（对齐原型：通过/预警/禁止 + 进度条 + 查看详情）
-  移动端布局对齐费率 / 底价：标题行钉详情链、说明与金额独立成行、进度条可叠放
+  个人预算概述看板 UI（对齐费率：状态+说明同行，金额+剩余chip同行，进度条右侧剩余%）
+  移动端：标题行钉详情链，进度条满宽叠放；status 空值展示 '-'
 -->
 <template>
   <div class="person-budget-overview">
@@ -11,10 +11,12 @@
       <div :class="['pbo-head', { 'pbo-head--with-link': showDetailLink }]">
         <div class="pbo-head__main">
           <div class="pbo-head__row">
-            <span class="pbo-icon">{{ statusMeta.icon }}</span>
-            <span class="pbo-title">{{ statusMeta.title }}</span>
+            <span class="pbo-badge">
+              <span class="pbo-icon" aria-hidden="true">{{ statusMeta.icon }}</span>
+              <span class="pbo-title">{{ statusMeta.title }}</span>
+            </span>
+            <span v-if="statusDesc" class="pbo-desc">{{ statusDesc }}</span>
           </div>
-          <p class="pbo-desc">{{ statusDesc }}</p>
         </div>
         <el-button
           v-if="showDetailLink"
@@ -26,35 +28,37 @@
 
       <div v-if="!accountExists" class="pbo-account-tip">当前费用承担人该年度尚未建账</div>
 
-      <div class="pbo-line2">
-        <div class="pbo-line2__text">
-          <span class="pbo-line2__label">本年累计使用（含本次）</span>
-          <b class="pbo-money">{{ formatMoney(overview.usedAmount) }}</b>
-          <span class="pbo-sep">/</span>
-          <span class="pbo-line2__label">总预算</span>
-          <b class="pbo-money">{{ formatMoney(overview.budgetAmount) }}</b>
+      <div class="pbo-metrics">
+        <div class="pbo-line2">
+          <div class="pbo-line2__text">
+            <span class="pbo-line2__label">本年累计使用（含本次）：</span>
+            <b class="pbo-money">{{ formatMoneyYuan(overview.usedAmount) }}</b>
+            <span class="pbo-sep">/</span>
+            <span class="pbo-line2__label">总预算</span>
+            <b class="pbo-money">{{ formatMoneyYuan(overview.budgetAmount) }}</b>
+            <span :class="['pbo-chip', remainingChipDanger ? 'is-danger' : '']">
+              剩余 {{ formatMoneyYuan(overview.remainingAmountWithCurrent) }}
+            </span>
+          </div>
         </div>
-        <span :class="['pbo-chip', remainingChipDanger ? 'is-danger' : '']">
-          剩余 {{ formatMoney(overview.remainingAmountWithCurrent) }}
-        </span>
-      </div>
 
-      <div class="pbo-bar-row">
-        <div class="pbo-bar-col">
-          <div class="pbo-bar">
-            <div class="pbo-bar__fill" :style="{ width: fillWidth + '%' }" />
-            <div
-              v-if="showWarnTick"
-              class="pbo-bar__tick"
-              :style="{ left: warnTickPercent + '%' }"
-              :title="'预警值：' + formatMoney(warnAmount)"
-            />
-          </div>
-          <div v-if="showWarnTick" class="pbo-scale">
-            <span
-              :class="['pbo-scale__sc', warnScaleClass]"
-              :style="{ left: warnTickPercent + '%' }"
-            >预警值：{{ formatMoney(warnAmount) }}</span>
+        <div class="pbo-bar-row">
+          <div class="pbo-bar-col">
+            <div class="pbo-bar">
+              <div class="pbo-bar__fill" :style="{ width: fillWidth + '%' }" />
+              <div
+                v-if="showWarnTick"
+                class="pbo-bar__tick"
+                :style="{ left: warnTickPercent + '%' }"
+                :title="'预警值：' + formatMoneyYuan(warnAmount)"
+              />
+            </div>
+            <div v-if="showWarnTick" class="pbo-scale">
+              <span
+                :class="['pbo-scale__sc', warnScaleClass]"
+                :style="{ left: warnTickPercent + '%' }"
+              >预警值：{{ formatMoneyYuan(warnAmount) }}</span>
+            </div>
           </div>
         </div>
         <span class="pbo-bar-label">{{ barLabel }}</span>
@@ -66,7 +70,7 @@
 <script>
 import {
   BUDGET_STATUS,
-  formatMoney,
+  formatMoneyYuan,
   formatPercent,
   normalizeBudgetStatus,
   parseAmount
@@ -173,7 +177,7 @@ export default {
     }
   },
   methods: {
-    formatMoney
+    formatMoneyYuan
   }
 }
 </script>
@@ -241,37 +245,54 @@ export default {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 8px 10px;
   min-width: 0;
 }
+/* 对齐费率：图标 + 状态文案收成同一徽章，垂直居中 */
+.pbo-badge {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  gap: 6px;
+  min-height: 24px;
+  padding: 2px 10px 2px 8px;
+  border-radius: 12px;
+  box-sizing: border-box;
+  line-height: 1;
+}
+.is-pass .pbo-badge { background: #dcf5cf; }
+.is-warn .pbo-badge { background: #ffefc2; }
+.is-deny .pbo-badge { background: #ffd9d6; }
+/* 对齐费率：小实心圆点，不放字符 */
 .pbo-icon {
-  width: 22px;
-  height: 22px;
+  width: 6px;
+  height: 6px;
   border-radius: 50%;
   flex: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  font-size: 13px;
-  font-weight: 700;
+  display: inline-block;
+  font-size: 0;
+  line-height: 0;
+  overflow: hidden;
+  color: transparent;
 }
 .is-pass .pbo-icon { background: #00b578; }
 .is-warn .pbo-icon { background: #ff8f1f; }
 .is-deny .pbo-icon { background: #fa5151; }
 .pbo-title {
-  font-size: 15px;
+  font-size: 13px;
   font-weight: 600;
-  line-height: 22px;
+  line-height: 16px;
 }
-.is-pass .pbo-title { color: #00b578; }
-.is-warn .pbo-title { color: #ff8f1f; }
-.is-deny .pbo-title { color: #fa5151; }
+.is-pass .pbo-title { color: #237804; }
+.is-warn .pbo-title { color: #d46b08; }
+.is-deny .pbo-title { color: #cf1322; }
 .pbo-desc {
-  margin: 6px 0 0;
+  margin: 0;
   font-size: 12px;
-  line-height: 18px;
+  line-height: 24px;
   color: #646a73;
+  flex: 1 1 auto;
+  min-width: 0;
   word-break: break-word;
   overflow-wrap: anywhere;
 }
@@ -290,12 +311,20 @@ export default {
   color: #d46b08;
   word-break: break-word;
 }
-.pbo-line2 {
-  display: flex;
+.pbo-metrics {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-rows: auto auto;
   align-items: center;
-  flex-wrap: wrap;
-  gap: 8px 12px;
+  column-gap: 16px;
+  row-gap: 14px;
   margin-top: 12px;
+  min-width: 0;
+  max-width: 100%;
+}
+.pbo-line2 {
+  grid-column: 1 / -1;
+  grid-row: 1;
   font-size: 13.5px;
   color: #1f2329;
   min-width: 0;
@@ -304,10 +333,9 @@ export default {
 .pbo-line2__text {
   display: inline-flex;
   flex-wrap: wrap;
-  align-items: baseline;
-  gap: 4px 6px;
+  align-items: center;
+  gap: 4px 8px;
   min-width: 0;
-  flex: 1 1 220px;
   line-height: 1.65;
   word-break: break-word;
   overflow-wrap: anywhere;
@@ -320,6 +348,9 @@ export default {
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }
+.is-pass .pbo-money { color: #00b578; }
+.is-warn .pbo-money { color: #ff8f1f; }
+.is-deny .pbo-money { color: #fa5151; }
 .pbo-sep {
   color: #8f959e;
 }
@@ -329,23 +360,19 @@ export default {
   padding: 3px 10px;
   border-radius: 12px;
   white-space: nowrap;
-  flex-shrink: 0;
+  line-height: 1.4;
 }
 .is-pass .pbo-chip { background: #dcf5cf; color: #237804; }
 .is-warn .pbo-chip { background: #ffefc2; color: #d46b08; }
 .is-deny .pbo-chip { background: #ffd9d6; color: #cf1322; }
 .pbo-chip.is-danger { background: #ffd9d6; color: #cf1322; }
 .pbo-bar-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px 12px;
-  margin-top: 14px;
+  grid-column: 1;
+  grid-row: 2;
   min-width: 0;
   max-width: 100%;
 }
 .pbo-bar-col {
-  flex: 1 1 0;
   min-width: 0;
 }
 .pbo-bar {
@@ -388,11 +415,16 @@ export default {
   &.is-right { transform: translateX(-100%); margin-right: 6px; }
 }
 .pbo-bar-label {
-  flex: 0 0 auto;
+  grid-column: 2;
+  grid-row: 2;
+  justify-self: end;
+  align-self: start;
   font-size: 12px;
   font-weight: 700;
   white-space: nowrap;
   line-height: 1.2;
+  /* 与 8px 进度条视觉居中 */
+  margin-top: -3px;
 }
 .is-pass .pbo-bar-label { color: #00b578; }
 .is-warn .pbo-bar-label { color: #ff8f1f; }
@@ -421,35 +453,29 @@ export default {
     min-height: 22px;
   }
 
-  .pbo-desc {
-    margin-top: 4px;
-  }
-
-  .pbo-line2 {
+  .pbo-metrics {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto;
     margin-top: 10px;
-    gap: 8px;
-  }
-
-  .pbo-line2__text {
-    flex: 1 1 100%;
-    font-size: 13px;
-  }
-
-  .pbo-chip {
-    flex: 0 0 auto;
+    row-gap: 8px;
+    column-gap: 0;
   }
 
-  .pbo-bar-row {
-    margin-top: 12px;
+  .pbo-line2,
+  .pbo-bar-row,
+  .pbo-bar-label {
+    grid-column: 1;
+    grid-row: auto;
+    justify-self: stretch;
   }
 
-  .pbo-bar-col {
-    flex: 1 1 100%;
-    width: 100%;
+  .pbo-bar-label {
+    justify-self: start;
+    margin-top: 0;
   }
 
-  .pbo-bar-label {
-    flex: 1 1 auto;
+  .pbo-line2__text {
+    font-size: 13px;
   }
 
   .pbo-scale__sc {

package/dist/bizui/src/FieldPersonBudgetBoard/core/format.js

@@ -32,12 +32,18 @@ function formatAmountFixed2(value) {
   return `${neg ? '-' : ''}${withComma}.${decPart}`
 }
 
-/** null/空展示 —；展示固定两位小数 */
+/** null/空展示 —；展示固定两位小数，前缀 ¥ */
 export function formatMoney(value) {
   const formatted = formatAmountFixed2(value)
   return formatted == null ? '—' : `¥ ${formatted}`
 }
 
+/** 对齐费率文案：248,601.00 元 */
+export function formatMoneyYuan(value) {
+  const formatted = formatAmountFixed2(value)
+  return formatted == null ? '—' : `${formatted} 元`
+}
+
 export function formatMoneyPlain(value) {
   const formatted = formatAmountFixed2(value)
   return formatted == null ? '—' : formatted