imeik-bizui 2.7.5 → 2.7.7

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

@@ -7,7 +7,7 @@
   <div v-if="visible" class="floor-price-board">
     <div v-if="showTitle" class="fpb-title">
       <span class="fpb-title__bar" />
-      <span class="fpb-title__text">{{ title }}</span>
+      <span class="fpb-title__text" @click="onSecretTitleClick">{{ title }}</span>
     </div>
 
     <div
@@ -28,7 +28,7 @@
                 :alt="resolvedStatusLabel"
                 aria-hidden="true"
               >
-              <h2 class="fpb-result__title">{{ resolvedResultTitle }}</h2>
+              <h2 class="fpb-result__title" @click="onSecretTitleClick">{{ resolvedResultTitle }}</h2>
               <span class="fpb-badge">{{ resolvedStatusLabel }}</span>
               <button
                 v-if="useDemo"
@@ -39,6 +39,52 @@
               >
                 Mock
               </button>
+              <el-popover
+                v-if="settingsUnlocked"
+                v-model="settingsOpen"
+                placement="bottom-start"
+                width="300"
+                trigger="click"
+              >
+                <div class="fpb-settings">
+                  <div class="fpb-settings__head">
+                    <span class="fpb-settings__title">价格展示</span>
+                    <span class="fpb-settings__hint">临时生效，刷新恢复默认</span>
+                  </div>
+                  <div
+                    v-for="opt in displayModeOptions"
+                    :key="opt.value"
+                    :class="['fpb-settings__option', { 'is-active': displayMode === opt.value }]"
+                    role="radio"
+                    :aria-checked="displayMode === opt.value ? 'true' : 'false'"
+                    @click="selectDisplayMode(opt.value)"
+                  >
+                    <span class="fpb-settings__radio" />
+                    <span class="fpb-settings__body">
+                      <span class="fpb-settings__label">
+                        {{ opt.label }}
+                        <em v-if="opt.value === defaultDisplayMode" class="fpb-settings__tag">默认</em>
+                      </span>
+                      <span class="fpb-settings__desc">{{ opt.desc }}</span>
+                    </span>
+                    <i v-if="displayMode === opt.value" class="el-icon-check fpb-settings__check" />
+                  </div>
+                  <div class="fpb-settings__foot">
+                    <button type="button" class="fpb-settings__link" @click="onLockSettings">
+                      隐藏设置入口
+                    </button>
+                  </div>
+                </div>
+                <button
+                  slot="reference"
+                  type="button"
+                  class="fpb-settings-trigger"
+                  title="价格展示设置"
+                  aria-label="价格展示设置"
+                >
+                  <i class="el-icon-setting" />
+                </button>
+              </el-popover>
             </div>
             <p v-if="resolvedResultDescription" class="fpb-result__desc">
               {{ resolvedResultDescription }}
@@ -105,9 +151,9 @@
                 <dt>与标准差额</dt>
                 <dd
                   :class="{ 'is-danger': row.hit, 'is-ok': !row.hit && row.gap > 0 }"
-                  :title="row.gapLabel || '-'"
+                  :title="gapLabelOf(row)"
                 >
-                  {{ row.gapLabel || '-' }}
+                  {{ gapLabelOf(row) }}
                 </dd>
               </div>
             </dl>
@@ -146,9 +192,20 @@ import {
   DEFAULT_STATUS_LABEL,
   PANEL_STATE,
   buildResultCopy,
+  formatGapLabel,
   formatMoney,
   formatNumber
 } from './utils'
+import {
+  DEFAULT_DISPLAY_MODE,
+  DISPLAY_MODE_OPTIONS,
+  getDisplayMode,
+  isSettingsUnlocked,
+  lockSettings,
+  setDisplayMode,
+  subscribeDisplayMode,
+  unlockSettings
+} from './displayPrefs'
 import FloorPriceSectionPager from './FloorPriceSectionPager.vue'
 import iconBlocked from '../assets/icon-blocked.png'
 import iconPass from '../assets/icon-pass.png'
@@ -160,6 +217,9 @@ const STATUS_ICON = {
   [PANEL_STATE.EXEMPT]: iconExempt
 }
 
+const SECRET_CLICK_NEED = 5
+const SECRET_CLICK_WINDOW_MS = 2500
+
 export default {
   name: 'FloorPriceBoard',
   components: {
@@ -248,7 +308,7 @@ export default {
       type: Boolean,
       default: false
     },
-    /** 价格/金额小数位；默认 null 不强制，跟随接口原值 */
+    /** 价格/金额小数位；显式传入时覆盖 displayMode */
     numberDigits: {
       type: Number,
       default: null
@@ -264,7 +324,14 @@ export default {
   },
   data() {
     return {
-      productPage: 1
+      productPage: 1,
+      displayMode: getDisplayMode(),
+      displayModeOptions: DISPLAY_MODE_OPTIONS,
+      defaultDisplayMode: DEFAULT_DISPLAY_MODE,
+      settingsUnlocked: isSettingsUnlocked(),
+      settingsOpen: false,
+      secretClickCount: 0,
+      secretClickTimer: null
     }
   },
   computed: {
@@ -314,8 +381,14 @@ export default {
       )
     },
     applyTotalFeeText() {
+      // 依赖 displayMode，切换展示偏好时同步刷新
+      const mode = this.displayMode
       if (this.applyTotalFee == null || this.applyTotalFee === '') return ''
-      return `${formatNumber(this.applyTotalFee)} 元`
+      return `${formatNumber(this.applyTotalFee, {
+        digits: this.numberDigits,
+        mode,
+        fallback: '-'
+      })} 元`
     },
     yearText() {
       if (this.year == null || this.year === '') return ''
@@ -349,9 +422,36 @@ export default {
       if (this.productPage > maxPage) this.productPage = 1
     }
   },
+  created() {
+    this._unsubDisplayMode = subscribeDisplayMode((mode) => {
+      this.displayMode = mode
+    })
+  },
+  beforeDestroy() {
+    if (this._unsubDisplayMode) this._unsubDisplayMode()
+    if (this.secretClickTimer) clearTimeout(this.secretClickTimer)
+  },
   methods: {
+    formatNumber(v) {
+      return formatNumber(v, {
+        digits: this.numberDigits,
+        mode: this.displayMode,
+        fallback: '-'
+      })
+    },
     formatMoney(v) {
-      return formatMoney(v, { digits: this.numberDigits, fallback: '-' })
+      return formatMoney(v, {
+        digits: this.numberDigits,
+        mode: this.displayMode,
+        fallback: '-'
+      })
+    },
+    gapLabelOf(row) {
+      if (!row) return '-'
+      if (row.gap === undefined || row.gap === null || row.gap === '') {
+        return row.gapLabel || '-'
+      }
+      return formatGapLabel(row.gap, { mode: this.displayMode }) || row.gapLabel || '-'
     },
     shiftAria(row) {
       if (!row) return ''
@@ -365,6 +465,39 @@ export default {
     },
     onProductPage(page) {
       this.productPage = page
+    },
+    /** 连点标题 5 次：未解锁则显示设置入口，已解锁则隐藏 */
+    onSecretTitleClick() {
+      this.secretClickCount += 1
+      if (this.secretClickTimer) clearTimeout(this.secretClickTimer)
+      this.secretClickTimer = setTimeout(() => {
+        this.secretClickCount = 0
+        this.secretClickTimer = null
+      }, SECRET_CLICK_WINDOW_MS)
+      if (this.secretClickCount < SECRET_CLICK_NEED) return
+      this.secretClickCount = 0
+      if (this.secretClickTimer) {
+        clearTimeout(this.secretClickTimer)
+        this.secretClickTimer = null
+      }
+      if (this.settingsUnlocked) {
+        this.onLockSettings()
+        return
+      }
+      unlockSettings()
+      this.settingsUnlocked = true
+      // popover 的 reference 刚渲染出来，需等 DOM 就绪后再打开
+      this.$nextTick(() => {
+        this.settingsOpen = true
+      })
+    },
+    selectDisplayMode(mode) {
+      this.displayMode = setDisplayMode(mode)
+    },
+    onLockSettings() {
+      lockSettings()
+      this.settingsOpen = false
+      this.settingsUnlocked = false
     }
   }
 }
@@ -372,6 +505,7 @@ export default {
 
 <style lang="scss" scoped>
 .floor-price-board {
+  position: relative;
   width: 100%;
   max-width: 100%;
   min-width: 0;
@@ -415,6 +549,8 @@ export default {
   font-weight: 600;
   color: var(--fpb-text);
   line-height: 1;
+  cursor: default;
+  user-select: none;
 }
 
 .fpb-body {
@@ -518,6 +654,181 @@ export default {
   font-size: 17px;
   line-height: 24px;
   font-weight: 600;
+  cursor: default;
+  user-select: none;
+}
+
+.fpb-settings-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--fpb-tertiary);
+  font-size: 16px;
+  cursor: pointer;
+  transition: color 0.15s, background-color 0.15s;
+
+  &:hover,
+  &:focus-visible {
+    color: var(--fpb-brand);
+    background: rgba(51, 112, 255, 0.08);
+    outline: none;
+  }
+}
+
+/*
+ * popover 内容：不用原生 label/input，避免宿主全局样式导致文字重叠。
+ * popover 挂在 body 下，拿不到 .floor-price-board 上的变量，需在此重新声明。
+ */
+.fpb-settings {
+  --fpb-brand: #3370ff;
+  font-size: 13px;
+  line-height: 20px;
+  color: #1f2329;
+}
+
+.fpb-settings__head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  padding: 0 4px 8px;
+}
+
+.fpb-settings__title {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.fpb-settings__hint {
+  font-size: 12px;
+  color: #8f959e;
+}
+
+.fpb-settings__option {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 8px 10px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.15s, border-color 0.15s;
+
+  & + & {
+    margin-top: 4px;
+  }
+
+  &:hover {
+    background: #f5f7fa;
+  }
+
+  &.is-active {
+    border-color: var(--fpb-brand);
+    background: #f0f5ff;
+  }
+}
+
+.fpb-settings__radio {
+  flex: 0 0 auto;
+  position: relative;
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+  border: 1px solid #c0c4cc;
+  border-radius: 50%;
+  box-sizing: border-box;
+  background: #fff;
+  transition: border-color 0.15s, background-color 0.15s;
+
+  .is-active & {
+    border-color: var(--fpb-brand);
+    background: var(--fpb-brand);
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 6px;
+      height: 6px;
+      margin: -3px 0 0 -3px;
+      border-radius: 50%;
+      background: #fff;
+    }
+  }
+}
+
+.fpb-settings__body {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.fpb-settings__label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 500;
+
+  .is-active & {
+    color: var(--fpb-brand);
+    font-weight: 600;
+  }
+}
+
+.fpb-settings__check {
+  flex: 0 0 auto;
+  align-self: center;
+  color: var(--fpb-brand);
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.fpb-settings__tag {
+  padding: 0 5px;
+  border-radius: 3px;
+  background: #eef0f3;
+  color: #646a73;
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+}
+
+.fpb-settings__desc {
+  font-size: 12px;
+  line-height: 18px;
+  color: #8f959e;
+  font-variant-numeric: tabular-nums;
+}
+
+.fpb-settings__foot {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 6px;
+  padding: 8px 4px 0;
+  border-top: 1px solid #f0f2f5;
+}
+
+.fpb-settings__link {
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: #8f959e;
+  font-size: 12px;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--fpb-brand);
+  }
 }
 
 .fpb-badge {

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

@@ -142,7 +142,7 @@
                     :key="i"
                     class="fpd-section__footer-item"
                   >
-                    {{ v }}
+                    {{ formatFooterValue(v) }}
                   </span>
                 </template>
                 <template v-else>{{ section.footer.text }}</template>
@@ -173,6 +173,7 @@
 
 <script>
 import { DEFAULT_DETAIL_FORMULAS, formatNumber, formatSignedNumber } from './utils'
+import { getDisplayMode, subscribeDisplayMode } from './displayPrefs'
 import FloorPriceSectionPager from './FloorPriceSectionPager.vue'
 
 export default {
@@ -252,7 +253,8 @@ export default {
   data() {
     return {
       sectionPages: {},
-      isNarrow: false
+      isNarrow: false,
+      displayMode: getDisplayMode()
     }
   },
   computed: {
@@ -348,11 +350,15 @@ export default {
     if (typeof window !== 'undefined') {
       window.addEventListener('resize', this.updateNarrow)
     }
+    this._unsubDisplayMode = subscribeDisplayMode((mode) => {
+      this.displayMode = mode
+    })
   },
   beforeDestroy() {
     if (typeof window !== 'undefined') {
       window.removeEventListener('resize', this.updateNarrow)
     }
+    if (this._unsubDisplayMode) this._unsubDisplayMode()
   },
   methods: {
     updateNarrow() {
@@ -397,9 +403,9 @@ export default {
     },
     formatCell(value, col = {}) {
       if (col.type === 'number' || col.type === 'highlight' || col.digits != null) {
-        // 金额按接口原样展示（不千分位、不截断小数）
         return formatNumber(value, {
           digits: col.digits != null ? col.digits : null,
+          mode: this.displayMode,
           fallback: '-'
         })
       }
@@ -409,9 +415,20 @@ export default {
     formatGapCell(value, col = {}) {
       return formatSignedNumber(value, {
         digits: col.digits != null ? col.digits : null,
+        mode: this.displayMode,
         fallback: '-'
       })
     },
+    formatFooterValue(v) {
+      if (v == null) return ''
+      if (typeof v !== 'object') return String(v)
+      if (v.kind === 'qty') {
+        const n = v.value == null ? '-' : String(v.value)
+        return v.label ? `${v.label} ${n}` : n
+      }
+      const body = formatNumber(v.value, { mode: this.displayMode, fallback: '-' })
+      return v.label ? `${v.label} ${body}` : body
+    },
     gapClass(value, row) {
       const n = Number(value != null ? value : row && row.gap)
       if (Number.isNaN(n) || n >= 0) return ''

package/dist/bizui/src/FieldFloorPriceBoard/core/displayPrefs.js

@@ -0,0 +1,62 @@
+/**
+ * 底价价格展示偏好（仅内存，不持久化；刷新页面恢复默认策略）
+ *
+ * fixed2   — 默认：一律两位小数
+ * padMin2  — 托底：不足两位补 0，两位及以上原样
+ * raw      — 接口原始字符串 / Number 原样
+ */
+
+export const DISPLAY_MODE = {
+  FIXED_2: 'fixed2',
+  PAD_MIN_2: 'padMin2',
+  RAW: 'raw'
+}
+
+export const DEFAULT_DISPLAY_MODE = DISPLAY_MODE.FIXED_2
+
+export const DISPLAY_MODE_OPTIONS = [
+  { value: DISPLAY_MODE.FIXED_2, label: '固定两位小数', desc: '201 → 201.00，1442.7875 → 1442.79' },
+  { value: DISPLAY_MODE.PAD_MIN_2, label: '不足两位补齐', desc: '201 → 201.00，1442.7875 保持原样' },
+  { value: DISPLAY_MODE.RAW, label: '展示原始数据', desc: '接口返回什么就显示什么' }
+]
+
+const listeners = new Set()
+
+let currentMode = DEFAULT_DISPLAY_MODE
+let settingsUnlocked = false
+
+export function getDisplayMode() {
+  return currentMode
+}
+
+export function setDisplayMode(mode) {
+  const next = Object.values(DISPLAY_MODE).includes(mode) ? mode : DEFAULT_DISPLAY_MODE
+  currentMode = next
+  listeners.forEach((fn) => {
+    try {
+      fn(next)
+    } catch (e) {
+      /* ignore */
+    }
+  })
+  return next
+}
+
+export function subscribeDisplayMode(fn) {
+  if (typeof fn !== 'function') return () => {}
+  listeners.add(fn)
+  return () => listeners.delete(fn)
+}
+
+export function isSettingsUnlocked() {
+  return settingsUnlocked
+}
+
+export function unlockSettings() {
+  settingsUnlocked = true
+  return true
+}
+
+export function lockSettings() {
+  settingsUnlocked = false
+}

package/dist/bizui/src/FieldFloorPriceBoard/core/normalize.js

@@ -8,7 +8,6 @@ import {
   DEFAULT_STATUS_LABEL,
   buildResultCopy,
   computePriceGap,
-  formatNumber,
   resolvePanelState,
   roundMoney
 } from './utils'
@@ -151,7 +150,7 @@ function buildSections(data = {}) {
       footer: {
         label: '合计（含本次）',
         theme: 'purple',
-        values: [`金额 ${formatNumber(sumBy(saleRows, 'amount'))}`]
+        values: [{ kind: 'money', label: '金额', value: sumBy(saleRows, 'amount') }]
       }
     })
   }
@@ -172,8 +171,8 @@ function buildSections(data = {}) {
         label: '合计（含本次）',
         theme: 'danger',
         values: [
-          `数量 ${formatNumber(sumBy(nonSaleRows, 'qty'))}`,
-          `折算费用 ${formatNumber(sumBy(nonSaleRows, 'amount'))}`
+          { kind: 'qty', label: '数量', value: sumBy(nonSaleRows, 'qty') },
+          { kind: 'money', label: '折算费用', value: sumBy(nonSaleRows, 'amount') }
         ]
       }
     })
@@ -193,7 +192,7 @@ function buildSections(data = {}) {
       footer: {
         label: '合计（含本次）',
         theme: 'danger',
-        values: [formatNumber(sumBy(expenseRows, 'costAmount'))]
+        values: [{ kind: 'money', value: sumBy(expenseRows, 'costAmount') }]
       }
     })
   }