imeik-bizui 2.8.2 → 2.8.4

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"
@@ -29,16 +31,16 @@
       <div class="pbo-metrics">
         <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-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">{{ formatMoney(overview.budgetAmount) }}</b>
+            <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 class="pbo-bar-row">
           <div class="pbo-bar-col">
@@ -48,14 +50,14 @@
                 v-if="showWarnTick"
                 class="pbo-bar__tick"
                 :style="{ left: warnTickPercent + '%' }"
-                :title="'预警值：' + formatMoney(warnAmount)"
+                :title="'预警值：' + formatMoneyYuan(warnAmount)"
               />
             </div>
             <div v-if="showWarnTick" class="pbo-scale">
               <span
                 :class="['pbo-scale__sc', warnScaleClass]"
                 :style="{ left: warnTickPercent + '%' }"
-              >预警值：{{ formatMoney(warnAmount) }}</span>
+              >预警值：{{ formatMoneyYuan(warnAmount) }}</span>
             </div>
           </div>
         </div>
@@ -68,7 +70,7 @@
 <script>
 import {
   BUDGET_STATUS,
-  formatMoney,
+  formatMoneyYuan,
   formatPercent,
   normalizeBudgetStatus,
   parseAmount
@@ -139,13 +141,16 @@ export default {
     budgetNum() {
       return parseAmount(this.overview && this.overview.budgetAmount)
     },
+    /** 有有效总预算才算占比；否则不展示假的 100% 剩余 */
+    hasBudgetRatio() {
+      return Number.isFinite(this.usedNum) && Number.isFinite(this.budgetNum) && this.budgetNum > 0
+    },
     usagePercent() {
-      const used = this.usedNum
-      const budget = this.budgetNum
-      if (!Number.isFinite(used) || !Number.isFinite(budget) || budget <= 0) return 0
-      return (used / budget) * 100
+      if (!this.hasBudgetRatio) return NaN
+      return (this.usedNum / this.budgetNum) * 100
     },
     fillWidth() {
+      if (!this.hasBudgetRatio) return '0'
       return Math.min(Math.max(this.usagePercent, 0), 100).toFixed(2)
     },
     warnAmount() {
@@ -169,13 +174,14 @@ export default {
       return 'is-mid'
     },
     barLabel() {
+      if (!this.hasBudgetRatio) return '剩余 —'
       const remain = 100 - this.usagePercent
       if (remain < 0) return `已超 ${formatPercent(this.usagePercent - 100)}`
       return `剩余 ${formatPercent(remain)}`
     }
   },
   methods: {
-    formatMoney
+    formatMoneyYuan
   }
 }
 </script>
@@ -243,37 +249,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;
 }
@@ -304,7 +327,7 @@ export default {
   max-width: 100%;
 }
 .pbo-line2 {
-  grid-column: 1;
+  grid-column: 1 / -1;
   grid-row: 1;
   font-size: 13.5px;
   color: #1f2329;
@@ -314,8 +337,8 @@ 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;
   line-height: 1.65;
   word-break: break-word;
@@ -329,14 +352,13 @@ 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;
 }
 .pbo-chip {
-  grid-column: 2;
-  grid-row: 1;
-  justify-self: end;
-  align-self: start;
   font-size: 12px;
   font-weight: 600;
   padding: 3px 10px;
@@ -435,10 +457,6 @@ export default {
     min-height: 22px;
   }
 
-  .pbo-desc {
-    margin-top: 4px;
-  }
-
   .pbo-metrics {
     grid-template-columns: minmax(0, 1fr);
     grid-template-rows: auto;
@@ -448,7 +466,6 @@ export default {
   }
 
   .pbo-line2,
-  .pbo-chip,
   .pbo-bar-row,
   .pbo-bar-label {
     grid-column: 1;
@@ -456,10 +473,6 @@ export default {
     justify-self: stretch;
   }
 
-  .pbo-chip {
-    justify-self: start;
-  }
-
   .pbo-bar-label {
     justify-self: start;
     margin-top: 0;

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