n20-common-lib 3.3.16 → 3.3.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "3.3.16",
+  "version": "3.3.18",
   "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/Table/index.vue

@@ -174,7 +174,10 @@ export default {
   provide() {
     let bigData = this.bigData
     return {
-      bigData
+      bigData,
+      n20TableContext: {
+        getData: () => this.data || []
+      }
     }
   },
   watch: {

package/src/components/TableOperateColumn/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <el-table-column v-if="!bigData" v-bind="$attrs">
+  <el-table-column v-if="!bigData" v-bind="resolvedColumnAttrs">
     <OperateBtns slot-scope="{ row, $index }" :btn-list="btnList" :row="row" @command="(c) => $emit(c, row, $index)" />
   </el-table-column>
-  <ux-table-column v-else :field="$attrs.prop" :title="$attrs.label" v-bind="$attrs">
+  <ux-table-column v-else :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)" />
   </ux-table-column>
 </template>
@@ -10,17 +10,143 @@
 <script>
 // import { $lc } from '../../utils/i18n/index'
 import OperateBtns from './OperateBtns.vue'
+
+const DEFAULT_OPERATE_COLUMN_MIN_WIDTH = 80
+
 export default {
   name: 'TableOperateColumn',
   components: {
     OperateBtns
   },
-  inject: { bigData: { default: false } },
+  inject: {
+    bigData: { default: false },
+    n20TableContext: { 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 {
+        // 避免 Element/UX Table 将大量剩余空间分配给操作列。
+        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 = this.bigData ? 20 : 16
+      // OperateBtns 使用行内元素，除 6px margin 外还会产生约 4px 的模板空白。
+      const BUTTON_GAP = 10
+      const CHILDREN_ARROW_WIDTH = 20
+      const MORE_BUTTON_WIDTH = 16
+      const buttons = (this.btnList || []).filter((button) => button && button.isHas !== false)
+      const getButtonWidth = (button) => {
+        let width = this.measureOperateText(button.label)
+        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_MIN_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.n20TableContext?.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_MIN_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_MIN_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/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 // 每个字符的平均宽度（像素）