n20-common-lib 3.3.15 → 3.3.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "3.3.15",
+  "version": "3.3.17",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/assets/css/v3/table.scss

@@ -265,6 +265,7 @@
   .table-hover-btns {
     position: absolute;
     right: 0;
+    width: max-content;
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -274,6 +275,7 @@
 
     .hover-btns-wrapper {
       display: flex;
+      width: max-content;
       align-items: center;
       gap: 4px;
       white-space: nowrap;

package/src/components/InputNumber/README.md

@@ -31,8 +31,8 @@
 | disabled     | Boolean       | undefined         | 是否禁用                              |
 | isClearable  | Boolean       | false             | 是否可清空                             |
 | placeholder  | String        | '请输入'             | 占位提示文本                            |
-| dNum         | Number        | undefined         | 小数位数，优先级低于format；超过15位时以字符串保持精度 |
-| format       | String        | undefined         | 格式化字符串，如'0.00'表示保留2位小数            |
+| dNum         | Number        | undefined         | 小数位数，优先级低于format；超过15位时以字符串保持精度；与format、rangeAuto同时使用时表示最大小数位数 |
+| format       | String        | undefined         | 格式化字符串，如'0.00'表示保留2位小数；与dNum、rangeAuto同时使用时表示最少展示的小数位数 |
 | suffix       | String        | '%'               | 后缀文本，仅在type='rate'时有效             |
 | rangeAuto    | Boolean       | false             | 是否自动处理范围值                         |
 | isString     | Boolean       | false             | 是否始终以字符串回传 input/change 值；小数位超过15位时自动按 true 处理 |
@@ -63,6 +63,8 @@
 
 当 `dNum` 或 `format` 设置为超过 15 位小数时，组件会强制按 `isString=true` 处理，即使未显式配置 `isString`，`input` 和 `change` 也会回传字符串，避免 JavaScript `Number` 丢失精度；失焦时会按最大位数四舍五入并移除尾部 `0`，例如 `0.200000` 会回传 `"0.2"`。设置 `isString` 为 `true` 后，无论小数位数多少，`input` 和 `change` 都回传字符串；清空时回传空字符串。
 
+当 `rangeAuto=true` 且同时配置 `format` 和 `dNum` 时，`format` 表示最少展示的小数位数，`dNum` 表示最多保留的小数位数。例如 `format="0.000000"`、`dNum=20` 时，输入 `0.2` 显示为 `0.200000`，输入 7 至 20 位小数按实际位数显示，超过 20 位时按 20 位四舍五入。
+
 | 事件名    | 说明          | 回调参数 |
 | ------ | ----------- | ---- |
 | input  | 值改变时触发      | 当前值  |

package/src/components/InputNumber/index.vue

@@ -170,7 +170,7 @@ export default {
               this.valueStr = ''
               return
             }
-            const formatted = this.normalizeHighPrecisionValue(normalized)
+            const formatted = this.normalizeHighPrecisionValue(val)
             this.valueStr = this.type === 'number' ? formatted : N.addThousands(formatted)
           }
           return
@@ -209,8 +209,16 @@ export default {
     }
   },
   methods: {
+    isAdaptivePrecision() {
+      return this.rangeAuto && this.format && (this.dNum || this.dNum === 0)
+    },
+    maxDecimalPlaces() {
+      return this.isAdaptivePrecision()
+        ? Math.max(this.fNum, this.dNum)
+        : this.fNum
+    },
     isHighPrecision() {
-      return this.fNum > MAX_SAFE_DECIMAL_PLACES
+      return this.maxDecimalPlaces() > MAX_SAFE_DECIMAL_PLACES
     },
     // 高精度小数会强制使用字符串回传，即使 isString 未开启。
     shouldEmitString() {
@@ -221,6 +229,20 @@ export default {
       if (!normalized) return ''
 
       const decimalPart = normalized.split('.')[1] || ''
+      if (this.isAdaptivePrecision()) {
+        const originalValue = String(value).replace(/,/g, '').trim()
+        const originalFraction = originalValue.match(/\.(\d*)$/)
+        const decimalPlaces = originalFraction
+          ? originalFraction[1].length
+          : decimalPart.length
+        if (decimalPlaces < this.fNum) {
+          return decimalToFixed(normalized, this.fNum)
+        }
+        if (decimalPlaces > this.maxDecimalPlaces()) {
+          return decimalToFixed(normalized, this.maxDecimalPlaces())
+        }
+        return decimalToFixed(normalized, decimalPlaces)
+      }
       const roundedValue = this.rangeAuto && decimalPart.length >= this.fNum
         ? normalized
         : decimalToFixed(normalized, this.fNum)
@@ -312,7 +334,7 @@ export default {
           return
         }
 
-        let nextValue = this.normalizeHighPrecisionValue(normalized)
+        let nextValue = this.normalizeHighPrecisionValue(valStr)
 
         if (compareDecimal(nextValue, this.min) < 0) {
           nextValue = normalizeDecimal(this.min)
@@ -320,6 +342,8 @@ export default {
           nextValue = normalizeDecimal(this.max)
         }
 
+        nextValue = this.normalizeHighPrecisionValue(nextValue)
+
         const formatted = this.type === 'number' ? nextValue : N.addThousands(nextValue)
         this.valueStr = formatted
         this.$nextTick(() => {

package/src/components/Statis/index.vue

@@ -2,7 +2,7 @@
   <div>
     <div v-if="size !== 'mini'" class="flex-box p-t-ss p-b-ss">
       <statisItem
-        :type="(label + '合计') | $lc"
+        :type="pageTotalLabel"
         :list="pageList"
         :show-w="showW"
         :show-u="showU"
@@ -18,7 +18,7 @@
     </div>
     <div v-else class="n20-statis p-t-ss p-b-ss">
       <span class="m-r">
-        {{ (label + ':') | $lc }}<span class="n20-primary"> {{ pageSum }}</span> {{ '条' | $lc }}
+        {{ label + ':' }}<span class="n20-primary"> {{ pageSum }}</span> {{ '条' | $lc }}
       </span>
       <span class="m-r">
         {{ '全部:' | $lc }}<span class="n20-primary"> {{ totalSun }}</span> {{ '条' | $lc }}
@@ -28,8 +28,10 @@
 </template>
 
 <script>
-import { $lc } from '../../utils/i18n/index'
 import statisItem from './statisItem.vue'
+
+import { $lc } from '../../utils/i18n/index'
+
 export default {
   name: 'Statis',
   components: {
@@ -70,10 +72,14 @@ export default {
     },
     label: {
       type: String,
-      default: $lc("已选")
+      default: $lc('已选')
     }
   },
   computed: {
+    pageTotalLabel() {
+      const separator = ['zh', 'ja', 'th'].includes(this._lang || 'zh') ? '' : ' '
+      return this.label + separator + $lc('合计')
+    },
     unitAs() {
       if (!this.showU) {
         return undefined

package/src/components/TablePro/index.vue

@@ -166,6 +166,13 @@ export default {
     empty,
     renderer
   },
+  provide() {
+    return {
+      n20TableProContext: {
+        getData: () => this.data || []
+      }
+    }
+  },
   props: {
     scrollY: {
       type: Object,

package/src/components/TableProOperateColumn/index.vue

@@ -1,19 +1,153 @@
 <template>
-  <vxe-column :field="$attrs.prop" :title="$attrs.label" v-bind="$attrs">
+  <vxe-column :field="$attrs.prop" :title="$attrs.label" v-bind="resolvedColumnAttrs">
     <OperateBtns slot-scope="{ row, $index }" :btn-list="btnList" :row="row" @command="(c) => $emit(c, row, $index)" />
   </vxe-column>
 </template>
 <script>
 import OperateBtns from './OperateBtns.vue'
 
+const DEFAULT_OPERATE_COLUMN_WIDTH = 180
+
 export default {
   name: 'TableProOperateColumn',
   components: { OperateBtns },
+  inject: {
+    n20TableProContext: {
+      default: null
+    }
+  },
   props: {
     btnList: {
       type: Array,
       default: () => []
     }
+  },
+  computed: {
+    resolvedColumnAttrs() {
+      const attrs = { ...this.$attrs }
+      const hasWidth =
+        Object.prototype.hasOwnProperty.call(attrs, 'width') &&
+        attrs.width !== null &&
+        attrs.width !== undefined &&
+        attrs.width !== ''
+      if (hasWidth) {
+        return attrs
+      }
+
+      const minWidthKey = ['minWidth', 'min-width'].find((key) => {
+        const value = attrs[key]
+        return Object.prototype.hasOwnProperty.call(attrs, key) && value !== null && value !== undefined && value !== ''
+      })
+      const calculatedWidth = this.calcOperateColumnWidth()
+      if (minWidthKey) {
+        const minWidth = this.parsePixelWidth(attrs[minWidthKey])
+        if (minWidth !== null) {
+          attrs[minWidthKey] = Math.max(calculatedWidth, minWidth)
+        }
+      } else {
+        attrs.width = calculatedWidth
+      }
+      return attrs
+    }
+  },
+  methods: {
+    measureOperateText(text) {
+      const normalizedText = text === undefined || text === null ? '' : String(text)
+      if (!normalizedText) return 0
+
+      const fallbackWidth = Array.from(normalizedText).reduce(
+        (width, char) => width + (/[⺀-鿿]/.test(char) ? 14 : 8),
+        0
+      )
+      if (typeof document === 'undefined') return fallbackWidth
+
+      const canvas = document.createElement('canvas')
+      const context = canvas.getContext('2d')
+      if (!context) return fallbackWidth
+
+      context.font = '14px PingFang SC, Microsoft YaHei, sans-serif'
+      return Math.max(context.measureText(normalizedText).width, fallbackWidth)
+    },
+    parsePixelWidth(value) {
+      if (typeof value === 'number') {
+        return Number.isFinite(value) && value >= 0 ? value : null
+      }
+      if (typeof value !== 'string') return null
+
+      const normalizedValue = value.trim()
+      if (!/^\d+(\.\d+)?(px)?$/.test(normalizedValue)) return null
+      const parsedValue = Number.parseFloat(normalizedValue)
+      return Number.isFinite(parsedValue) ? parsedValue : null
+    },
+    calcOperateColumnWidth() {
+      const CELL_HORIZONTAL_PADDING = 14
+      const BUTTON_GAP = 6
+      const ICON_AND_GAP_WIDTH = 23
+      const CHILDREN_ARROW_WIDTH = 20
+      const ICON_ONLY_BUTTON_WIDTH = 28
+      const MORE_BUTTON_WIDTH = 29
+      const buttons = (this.btnList || []).filter((button) => button && button.isHas !== false)
+      const getButtonWidth = (button) => {
+        if (button.iconOnly && button.icon) {
+          return ICON_ONLY_BUTTON_WIDTH
+        }
+
+        let width = this.measureOperateText(button.label)
+        if (button.icon) {
+          width += ICON_AND_GAP_WIDTH
+        }
+        if (button.children && button.children.length > 0) {
+          width += CHILDREN_ARROW_WIDTH
+        }
+        return width
+      }
+      const buttonWidths = buttons.map(getButtonWidth)
+
+      if (buttonWidths.length === 0) {
+        return DEFAULT_OPERATE_COLUMN_WIDTH
+      }
+
+      const calcLayoutWidth = (inlineWidths, hasMoreButton = false) => {
+        const itemCount = inlineWidths.length + (hasMoreButton ? 1 : 0)
+        const contentWidth = inlineWidths.reduce((total, width) => total + width, 0)
+        const moreButtonWidth = hasMoreButton ? MORE_BUTTON_WIDTH : 0
+        const gapWidth = Math.max(itemCount - 1, 0) * BUTTON_GAP
+        return contentWidth + moreButtonWidth + gapWidth + CELL_HORIZONTAL_PADDING
+      }
+      const rows = this.n20TableProContext?.getData?.() || []
+      if (rows.length > 0) {
+        const maxRowWidth = rows.reduce((maxWidth, row) => {
+          const visibleButtonWidths = buttons
+            .filter((button) => this.hasButton(button.isHas, row))
+            .map(getButtonWidth)
+          const rowWidth = visibleButtonWidths.length > 3
+            ? calcLayoutWidth(visibleButtonWidths.slice(0, 2), true)
+            : calcLayoutWidth(visibleButtonWidths)
+          return Math.max(maxWidth, rowWidth)
+        }, 0)
+        return Math.max(DEFAULT_OPERATE_COLUMN_WIDTH, Math.ceil(maxRowWidth))
+      }
+
+      const sortedButtonWidths = [...buttonWidths].sort((a, b) => b - a)
+      const directButtonsWidth = calcLayoutWidth(sortedButtonWidths.slice(0, 3))
+      const collapsedButtonsWidth =
+        sortedButtonWidths.length > 3 ? calcLayoutWidth(sortedButtonWidths.slice(0, 2), true) : 0
+
+      return Math.max(
+        DEFAULT_OPERATE_COLUMN_WIDTH,
+        Math.ceil(directButtonsWidth),
+        Math.ceil(collapsedButtonsWidth)
+      )
+    },
+    hasButton(isHas, row) {
+      if (isHas === undefined || isHas === null) return true
+      if (typeof isHas === 'boolean') return isHas
+      if (typeof isHas === 'function') return isHas(row)
+      if (typeof isHas === 'string' || Array.isArray(isHas)) {
+        return typeof this.$has === 'function' ? this.$has(isHas) : true
+      }
+      return false
+    }
   }
 }
 </script>

package/src/components/v3/TablePro/index.vue

@@ -287,7 +287,7 @@
         v-if="isOperateFixed && btnList && btnList.length > 0"
         :title="$lc('操作')"
         field="__operate__"
-        :width="operateColumnWidth"
+        :width="computedOperateColumnWidth"
         fixed="right"
         align="center"
       >
@@ -452,8 +452,10 @@ import empty from '../../Empty'
 import tableShowColumn from '../../ShowColumn/index.vue'
 import { saveTransform } from '../../ShowColumn/index.vue'
 import tableOperate from '../../TableOperate/index.vue'
-import OperateBtns from '../../TableProOperateColumn/OperateBtns.vue'
 import { isTableCellInteractiveTarget } from '../../TablePro/cellClick'
+import OperateBtns from '../../TableProOperateColumn/OperateBtns.vue'
+
+const DEFAULT_OPERATE_COLUMN_WIDTH = 180
 
 const renderer = {
   name: 'renderer',
@@ -627,10 +629,16 @@ export default {
       type: Function,
       default: null
     },
+    // 固定操作列宽度；不传时按各行实际可见按钮的最大宽度自动计算
     operateColumnWidth: {
       type: Number,
       default: 180
     },
+    // 自动计算操作列宽度的下限；显式传入 operateColumnWidth 时不生效
+    operateColumnMinWidth: {
+      type: [Number, String],
+      default: 180
+    },
     // 异步获取操作按钮函数，(row) => Promise<Array<BtnItem>>
     getOperateBtns: {
       type: Function,
@@ -722,6 +730,19 @@ export default {
       const activeCount = [this.showColumn, this.showSetsize, hasExpand].filter(Boolean).length
       return activeCount === 3 ? 112 : 76
     },
+    // 操作列宽度：显式传入时优先，否则按按钮内容自动计算
+    computedOperateColumnWidth() {
+      const hasCustomWidth = Object.prototype.hasOwnProperty.call(this.$options.propsData || {}, 'operateColumnWidth')
+      const hasCustomWidthValue =
+        this.operateColumnWidth !== null && this.operateColumnWidth !== undefined && this.operateColumnWidth !== ''
+      const customWidth = hasCustomWidthValue ? Number(this.operateColumnWidth) : NaN
+      if (hasCustomWidth && Number.isFinite(customWidth) && customWidth >= 0) {
+        return customWidth
+      }
+      const calculatedWidth = this.calcOperateColumnWidth()
+      const minWidth = this.parseOperateColumnPixelWidth(this.operateColumnMinWidth)
+      return minWidth === null ? calculatedWidth : Math.max(calculatedWidth, minWidth)
+    },
     // 骨架屏定位样式，根据表头实际高度动态计算
     skeletonStyle() {
       return {
@@ -1385,6 +1406,121 @@ export default {
       return checkedSet.has(args.row) ? 'v3-n20-table-pro__row-checked' : ''
     },
 
+    // 测量操作按钮文案宽度，优先使用当前页面字体，服务端或 canvas 不可用时使用保守估算
+    measureOperateText(text) {
+      const normalizedText = text === undefined || text === null ? '' : String(text)
+      if (!normalizedText) return 0
+
+      const fallbackWidth = Array.from(normalizedText).reduce(
+        (width, char) => width + (/[⺀-鿿]/.test(char) ? 14 : 8),
+        0
+      )
+      if (typeof document === 'undefined') return fallbackWidth
+
+      const canvas = document.createElement('canvas')
+      const context = canvas.getContext('2d')
+      if (!context) return fallbackWidth
+
+      const tableEl = this.$refs.vxeTable?.$el
+      const textEl = tableEl?.querySelector('.table-operate-btns__wrapper .el-link')
+      if (textEl && typeof window !== 'undefined' && window.getComputedStyle) {
+        const style = window.getComputedStyle(textEl)
+        context.font = `${style.fontWeight} ${style.fontSize} ${style.fontFamily}`
+      } else {
+        context.font = '14px PingFang SC, Microsoft YaHei, sans-serif'
+      }
+
+      return Math.max(context.measureText(normalizedText).width, fallbackWidth)
+    },
+
+    parseOperateColumnPixelWidth(value) {
+      if (typeof value === 'number') {
+        return Number.isFinite(value) && value >= 0 ? value : null
+      }
+      if (typeof value !== 'string') return null
+
+      const normalizedValue = value.trim()
+      if (!/^\d+(\.\d+)?(px)?$/.test(normalizedValue)) return null
+      const parsedValue = Number.parseFloat(normalizedValue)
+      return Number.isFinite(parsedValue) ? parsedValue : null
+    },
+
+    // 固定操作列按当前数据中每行实际可见的按钮布局取最大宽度
+    calcOperateColumnWidth() {
+      const CELL_HORIZONTAL_PADDING = 24
+      const BUTTON_GAP = 12
+      const ICON_AND_GAP_WIDTH = 20
+      const CHILDREN_ARROW_WIDTH = 14
+      const ICON_ONLY_BUTTON_WIDTH = 28
+      const MORE_BUTTON_WIDTH = 40
+      const buttons = (this.btnList || []).filter(Boolean)
+      const buttonWidthMap = new Map()
+      buttons.forEach((button) => {
+        if (button.iconOnly && button.icon) {
+          buttonWidthMap.set(button, ICON_ONLY_BUTTON_WIDTH)
+          return
+        }
+
+        let width = this.measureOperateText(button.label)
+        if (button.icon) {
+          width += ICON_AND_GAP_WIDTH
+        }
+        if (button.children && button.children.length > 0) {
+          width += CHILDREN_ARROW_WIDTH
+        }
+        buttonWidthMap.set(button, width)
+      })
+
+      if (buttons.length === 0) {
+        return DEFAULT_OPERATE_COLUMN_WIDTH
+      }
+
+      const calcLayoutWidth = (inlineWidths, hasMoreButton = false) => {
+        const itemCount = inlineWidths.length + (hasMoreButton ? 1 : 0)
+        const buttonWidth = inlineWidths.reduce((total, width) => total + width, 0)
+        const moreButtonWidth = hasMoreButton ? MORE_BUTTON_WIDTH : 0
+        const gapWidth = Math.max(itemCount - 1, 0) * BUTTON_GAP
+        return buttonWidth + moreButtonWidth + gapWidth + CELL_HORIZONTAL_PADDING
+      }
+
+      const calcButtonsWidth = (visibleButtons) => {
+        const hasMoreButton = visibleButtons.length > 3 || !!this.getOperateBtns
+        const inlineButtons = visibleButtons.length > 3 ? visibleButtons.slice(0, 2) : visibleButtons
+        return calcLayoutWidth(
+          inlineButtons.map((button) => buttonWidthMap.get(button) || 0),
+          hasMoreButton
+        )
+      }
+
+      // 直接根据 data 计算所有行，可覆盖 isHas(row) 导致的 1/2/3/更多按钮差异，且不受虚拟滚动影响。
+      const rows = Array.isArray(this.data) ? this.data : []
+      const maxRowWidth = rows.reduce((maxWidth, row) => {
+        const visibleButtons = buttons.filter((button) => this.hasBtn(button.isHas, row))
+        return Math.max(maxWidth, calcButtonsWidth(visibleButtons))
+      }, 0)
+
+      if (maxRowWidth > 0) {
+        return Math.max(DEFAULT_OPERATE_COLUMN_WIDTH, Math.ceil(maxRowWidth))
+      }
+
+      // 数据尚未加载时按所有可能布局保守估算，避免首次渲染回落到过窄列宽。
+      const sortedButtonWidths = buttons
+        .filter((button) => button.isHas !== false)
+        .map((button) => buttonWidthMap.get(button) || 0)
+        .sort((a, b) => b - a)
+      const directButtonsWidth = calcLayoutWidth(sortedButtonWidths.slice(0, 3))
+      const collapsedButtonsWidth =
+        sortedButtonWidths.length > 3 ? calcLayoutWidth(sortedButtonWidths.slice(0, 2), true) : 0
+      const dynamicButtonsWidth = this.getOperateBtns ? calcLayoutWidth(sortedButtonWidths.slice(0, 3), true) : 0
+
+      return Math.max(
+        DEFAULT_OPERATE_COLUMN_WIDTH,
+        Math.ceil(directButtonsWidth),
+        Math.ceil(collapsedButtonsWidth),
+        Math.ceil(dynamicButtonsWidth)
+      )
+    },
+
     calcColumnWidth(columns) {
       // 常量配置
       const CHAR_WIDTH = 20 // 每个字符的平均宽度（像素）