@aspire-ui/element-component-pro 1.0.7 → 1.0.8

package/dist/index.d.ts

@@ -1,13 +1,13 @@
 import { VueConstructor } from 'vue';
 import { default as ProTable, TableAction } from './ProTable';
-import { default as ProForm, ProFormItem, FormActions } from './ProForm';
+import { default as ProForm, ProFormItem, FormActions, FormattedNumberInput } from './ProForm';
 import { default as ProDescriptions } from './ProDescriptions';
 import { useForm } from './ProForm/useForm';
 import { useDescription } from './ProDescriptions/useDescription';
 import { useProTable } from './ProTable/useProTable';
 import { useComponentSetting } from './useComponentSetting';
 
-export { ProForm, ProFormItem, FormActions, useForm };
+export { ProForm, ProFormItem, FormActions, FormattedNumberInput, useForm };
 export { ProTable, useProTable, TableAction };
 export { ProDescriptions, useDescription };
 export { useComponentSetting };
@@ -16,6 +16,7 @@ export type { UseProTableReturn, UseProTablePropsReactive } from './ProTable/use
 export type { UseDescriptionReturn, UseDescriptionPropsReactive } from './ProDescriptions/useDescription';
 export * from './ProTable/types';
 export * from './types';
+export * from './utils/formattedNumber';
 export declare function install(Vue: VueConstructor): void;
 declare const _default: {
     install: typeof install;
@@ -52,16 +53,16 @@ declare const _default: {
             type: import('vue').PropType<boolean>;
             default: boolean;
         };
+        immediate: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
         treeProps: {
             type: import('vue').PropType<{
                 hasChildren?: string;
                 children?: string;
             }>;
         };
-        immediate: {
-            type: import('vue').PropType<boolean>;
-            default: boolean;
-        };
         rowSelection: {
             type: import('vue').PropType<{
                 type?: "checkbox" | "radio";
@@ -222,16 +223,16 @@ declare const _default: {
             type: import('vue').PropType<boolean>;
             default: boolean;
         };
+        immediate: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
         treeProps: {
             type: import('vue').PropType<{
                 hasChildren?: string;
                 children?: string;
             }>;
         };
-        immediate: {
-            type: import('vue').PropType<boolean>;
-            default: boolean;
-        };
         rowSelection: {
             type: import('vue').PropType<{
                 type?: "checkbox" | "radio";
@@ -433,16 +434,16 @@ declare const _default: {
             type: import('vue').PropType<boolean>;
             default: boolean;
         };
+        immediate: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
         treeProps: {
             type: import('vue').PropType<{
                 hasChildren?: string;
                 children?: string;
             }>;
         };
-        immediate: {
-            type: import('vue').PropType<boolean>;
-            default: boolean;
-        };
         rowSelection: {
             type: import('vue').PropType<{
                 type?: "checkbox" | "radio";
@@ -637,16 +638,16 @@ declare const _default: {
             type: import('vue').PropType<boolean>;
             default: boolean;
         };
+        immediate: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
         treeProps: {
             type: import('vue').PropType<{
                 hasChildren?: string;
                 children?: string;
             }>;
         };
-        immediate: {
-            type: import('vue').PropType<boolean>;
-            default: boolean;
-        };
         rowSelection: {
             type: import('vue').PropType<{
                 type?: "checkbox" | "radio";
@@ -807,16 +808,16 @@ declare const _default: {
             type: import('vue').PropType<boolean>;
             default: boolean;
         };
+        immediate: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
         treeProps: {
             type: import('vue').PropType<{
                 hasChildren?: string;
                 children?: string;
             }>;
         };
-        immediate: {
-            type: import('vue').PropType<boolean>;
-            default: boolean;
-        };
         rowSelection: {
             type: import('vue').PropType<{
                 type?: "checkbox" | "radio";
@@ -1053,16 +1054,16 @@ declare const _default: {
                 type: import('vue').PropType<boolean>;
                 default: boolean;
             };
+            immediate: {
+                type: import('vue').PropType<boolean>;
+                default: boolean;
+            };
             treeProps: {
                 type: import('vue').PropType<{
                     hasChildren?: string;
                     children?: string;
                 }>;
             };
-            immediate: {
-                type: import('vue').PropType<boolean>;
-                default: boolean;
-            };
             rowSelection: {
                 type: import('vue').PropType<{
                     type?: "checkbox" | "radio";
@@ -2571,5 +2572,56 @@ declare const _default: {
         dropDownActions: import('./ProTable').TableActionItem[];
         stopButtonPropagation: boolean;
     }>;
+    FormattedNumberInput: import('vue').DefineComponent<{
+        disabled: {
+            type: import('vue').PropType<boolean>;
+        };
+        value: {
+            type: import('vue').PropType<unknown>;
+        };
+        placeholder: {
+            type: import('vue').PropType<string>;
+        };
+        integerDigits: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+        decimalPlaces: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+        rounding: {
+            type: import('vue').PropType<import('.').FormattedNumberRounding>;
+            default: string;
+        };
+    }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        input: (value: unknown) => void;
+    }, string, Readonly<import('vue').ExtractPropTypes<{
+        disabled: {
+            type: import('vue').PropType<boolean>;
+        };
+        value: {
+            type: import('vue').PropType<unknown>;
+        };
+        placeholder: {
+            type: import('vue').PropType<string>;
+        };
+        integerDigits: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+        decimalPlaces: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+        rounding: {
+            type: import('vue').PropType<import('.').FormattedNumberRounding>;
+            default: string;
+        };
+    }>>, {
+        integerDigits: number;
+        decimalPlaces: number;
+        rounding: import('.').FormattedNumberRounding;
+    }>;
 };
 export default _default;

package/dist/style.css

@@ -1 +1 @@
-.ecp-pro-table[data-v-c5638c20]{padding:16px;background:#fff;width:100%;box-sizing:border-box}.ecp-pro-table[data-v-c5638c20] .el-table{width:100%!important}.ecp-pro-table__header[data-v-c5638c20]{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ecp-pro-table__title-wrapper[data-v-c5638c20]{display:flex;align-items:center;gap:4px}.ecp-pro-table__title[data-v-c5638c20]{font-size:16px;font-weight:600}.ecp-pro-table__help[data-v-c5638c20]{color:#909399;cursor:help}.ecp-pro-table__toolbar[data-v-c5638c20]{display:flex;align-items:center;gap:8px}.ecp-pro-table__body[data-v-c5638c20]{width:100%}.ecp-pro-table__pagination[data-v-c5638c20]{margin-top:16px;display:flex;justify-content:flex-end}.ecp-pro-table__col-help[data-v-c5638c20]{margin-left:4px;color:#909399;cursor:help}.ecp-table-action[data-v-45a58e7c],.ecp-table-action__item[data-v-45a58e7c]{display:inline-flex;align-items:center;gap:4px}.ecp-table-action__icon[data-v-45a58e7c]{margin-right:4px}.ecp-table-action__more[data-v-45a58e7c]{display:inline-flex;align-items:center}.ecp-table-action__dropdown-item[data-v-45a58e7c]{display:inline-flex;align-items:center;gap:4px}.ecp-tree-select[data-v-f30bba11]{position:relative;width:100%}.ecp-tree-select__filter-inner[data-v-f30bba11]{margin-bottom:8px}.ecp-tree-select__dropdown[data-v-f30bba11]{position:absolute;top:100%;left:0;right:0;max-height:280px;overflow:auto;background:#fff;border:1px solid #dcdfe6;border-radius:4px;margin-top:4px;z-index:1000;padding:8px}.ecp-tree-select__loading[data-v-f30bba11]{padding:24px;text-align:center;color:#909399;font-size:14px}.ecp-pro-form-item__colon[data-v-9514f173]{margin-right:2px}.ecp-pro-form-item__help-icon[data-v-9514f173]{margin-left:4px;color:#909399;cursor:help;font-size:14px}.ecp-pro-form-item__help-icon[data-v-9514f173]:hover{color:#409eff}.ecp-pro-form-item__help-item[data-v-9514f173]{margin-bottom:4px}.ecp-pro-form-item__help-item[data-v-9514f173]:last-child{margin-bottom:0}.ecp-form-actions[data-v-489c88d2]{text-align:right}.ecp-form-actions__advance[data-v-489c88d2]{margin-right:8px}.el-icon-d-arrow-left.up[data-v-489c88d2]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-489c88d2]{transform:rotate(-90deg)}.ecp-pro-form[data-v-bf70afca]{padding:16px;position:relative}.ecp-pro-form__advance[data-v-bf70afca]{margin-bottom:16px}.ecp-pro-form_col[data-v-bf70afca]{position:relative;float:right}.el-icon-d-arrow-left.up[data-v-bf70afca]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-bf70afca]{transform:rotate(-90deg)}.ecp-form-actions__advance[data-v-bf70afca]{position:absolute;bottom:0;left:50%;transform:translate(-50%,-50%)}.ecp-pro-descriptions[data-v-7d6cd376]{width:100%;box-sizing:border-box}.ecp-pro-descriptions__header[data-v-7d6cd376]{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px}.ecp-pro-descriptions__title-wrap[data-v-7d6cd376]{display:flex;align-items:center;gap:6px}.ecp-pro-descriptions__title[data-v-7d6cd376]{font-size:16px;font-weight:600;color:#303133}.ecp-pro-descriptions__help[data-v-7d6cd376],.ecp-pro-descriptions__toggle[data-v-7d6cd376]{color:#909399}.ecp-pro-descriptions__toggle .el-icon-arrow-down[data-v-7d6cd376]{margin-left:4px;transition:transform .2s ease}.ecp-pro-descriptions__toggle .el-icon-arrow-down.is-expanded[data-v-7d6cd376]{transform:rotate(180deg)}.ecp-pro-descriptions__body[data-v-7d6cd376]{display:grid;border-top:1px solid #ebeef5;border-left:1px solid #ebeef5;overflow:hidden}.ecp-pro-descriptions__body.is-collapsed[data-v-7d6cd376]{overflow:hidden}.ecp-pro-descriptions__body[data-v-7d6cd376]:not(.is-bordered){border-top:0;border-left:0;gap:12px 16px}.ecp-pro-descriptions__item[data-v-7d6cd376]{display:flex;min-width:0;border-right:1px solid #ebeef5;border-bottom:1px solid #ebeef5}.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__item[data-v-7d6cd376]{border-right:0;border-bottom:0}.ecp-pro-descriptions__label[data-v-7d6cd376],.ecp-pro-descriptions__content[data-v-7d6cd376]{min-width:0;box-sizing:border-box;word-break:break-word}.ecp-pro-descriptions__label[data-v-7d6cd376]{flex:0 0 120px;padding:12px 16px;color:#606266;background:#fafafa}.ecp-pro-descriptions__content[data-v-7d6cd376]{flex:1;padding:12px 16px;color:#303133;background:#fff}.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__label[data-v-7d6cd376]{flex-basis:auto;padding:0;margin-right:8px;background:transparent;font-weight:500}.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__content[data-v-7d6cd376]{padding:0;background:transparent}.ecp-pro-descriptions__body.is-small .ecp-pro-descriptions__label[data-v-7d6cd376],.ecp-pro-descriptions__body.is-small .ecp-pro-descriptions__content[data-v-7d6cd376]{padding-top:8px;padding-bottom:8px;font-size:13px}@media (max-width: 767px){.ecp-pro-descriptions__item[data-v-7d6cd376]{flex-direction:column}.ecp-pro-descriptions__label[data-v-7d6cd376]{flex-basis:auto}}
+.ecp-pro-table[data-v-c5638c20]{padding:16px;background:#fff;width:100%;box-sizing:border-box}.ecp-pro-table[data-v-c5638c20] .el-table{width:100%!important}.ecp-pro-table__header[data-v-c5638c20]{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ecp-pro-table__title-wrapper[data-v-c5638c20]{display:flex;align-items:center;gap:4px}.ecp-pro-table__title[data-v-c5638c20]{font-size:16px;font-weight:600}.ecp-pro-table__help[data-v-c5638c20]{color:#909399;cursor:help}.ecp-pro-table__toolbar[data-v-c5638c20]{display:flex;align-items:center;gap:8px}.ecp-pro-table__body[data-v-c5638c20]{width:100%}.ecp-pro-table__pagination[data-v-c5638c20]{margin-top:16px;display:flex;justify-content:flex-end}.ecp-pro-table__col-help[data-v-c5638c20]{margin-left:4px;color:#909399;cursor:help}.ecp-table-action[data-v-45a58e7c],.ecp-table-action__item[data-v-45a58e7c]{display:inline-flex;align-items:center;gap:4px}.ecp-table-action__icon[data-v-45a58e7c]{margin-right:4px}.ecp-table-action__more[data-v-45a58e7c]{display:inline-flex;align-items:center}.ecp-table-action__dropdown-item[data-v-45a58e7c]{display:inline-flex;align-items:center;gap:4px}.ecp-tree-select[data-v-f30bba11]{position:relative;width:100%}.ecp-tree-select__filter-inner[data-v-f30bba11]{margin-bottom:8px}.ecp-tree-select__dropdown[data-v-f30bba11]{position:absolute;top:100%;left:0;right:0;max-height:280px;overflow:auto;background:#fff;border:1px solid #dcdfe6;border-radius:4px;margin-top:4px;z-index:1000;padding:8px}.ecp-tree-select__loading[data-v-f30bba11]{padding:24px;text-align:center;color:#909399;font-size:14px}.ecp-pro-form-item__colon[data-v-d3466c67]{margin-right:2px}.ecp-pro-form-item__help-icon[data-v-d3466c67]{margin-left:4px;color:#909399;cursor:help;font-size:14px}.ecp-pro-form-item__help-icon[data-v-d3466c67]:hover{color:#409eff}.ecp-pro-form-item__help-item[data-v-d3466c67]{margin-bottom:4px}.ecp-pro-form-item__help-item[data-v-d3466c67]:last-child{margin-bottom:0}.ecp-form-actions[data-v-489c88d2]{text-align:right}.ecp-form-actions__advance[data-v-489c88d2]{margin-right:8px}.el-icon-d-arrow-left.up[data-v-489c88d2]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-489c88d2]{transform:rotate(-90deg)}.ecp-pro-form[data-v-bf70afca]{padding:16px;position:relative}.ecp-pro-form__advance[data-v-bf70afca]{margin-bottom:16px}.ecp-pro-form_col[data-v-bf70afca]{position:relative;float:right}.el-icon-d-arrow-left.up[data-v-bf70afca]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-bf70afca]{transform:rotate(-90deg)}.ecp-form-actions__advance[data-v-bf70afca]{position:absolute;bottom:0;left:50%;transform:translate(-50%,-50%)}.ecp-pro-descriptions[data-v-7d6cd376]{width:100%;box-sizing:border-box}.ecp-pro-descriptions__header[data-v-7d6cd376]{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px}.ecp-pro-descriptions__title-wrap[data-v-7d6cd376]{display:flex;align-items:center;gap:6px}.ecp-pro-descriptions__title[data-v-7d6cd376]{font-size:16px;font-weight:600;color:#303133}.ecp-pro-descriptions__help[data-v-7d6cd376],.ecp-pro-descriptions__toggle[data-v-7d6cd376]{color:#909399}.ecp-pro-descriptions__toggle .el-icon-arrow-down[data-v-7d6cd376]{margin-left:4px;transition:transform .2s ease}.ecp-pro-descriptions__toggle .el-icon-arrow-down.is-expanded[data-v-7d6cd376]{transform:rotate(180deg)}.ecp-pro-descriptions__body[data-v-7d6cd376]{display:grid;border-top:1px solid #ebeef5;border-left:1px solid #ebeef5;overflow:hidden}.ecp-pro-descriptions__body.is-collapsed[data-v-7d6cd376]{overflow:hidden}.ecp-pro-descriptions__body[data-v-7d6cd376]:not(.is-bordered){border-top:0;border-left:0;gap:12px 16px}.ecp-pro-descriptions__item[data-v-7d6cd376]{display:flex;min-width:0;border-right:1px solid #ebeef5;border-bottom:1px solid #ebeef5}.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__item[data-v-7d6cd376]{border-right:0;border-bottom:0}.ecp-pro-descriptions__label[data-v-7d6cd376],.ecp-pro-descriptions__content[data-v-7d6cd376]{min-width:0;box-sizing:border-box;word-break:break-word}.ecp-pro-descriptions__label[data-v-7d6cd376]{flex:0 0 120px;padding:12px 16px;color:#606266;background:#fafafa}.ecp-pro-descriptions__content[data-v-7d6cd376]{flex:1;padding:12px 16px;color:#303133;background:#fff}.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__label[data-v-7d6cd376]{flex-basis:auto;padding:0;margin-right:8px;background:transparent;font-weight:500}.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__content[data-v-7d6cd376]{padding:0;background:transparent}.ecp-pro-descriptions__body.is-small .ecp-pro-descriptions__label[data-v-7d6cd376],.ecp-pro-descriptions__body.is-small .ecp-pro-descriptions__content[data-v-7d6cd376]{padding-top:8px;padding-bottom:8px;font-size:13px}@media (max-width: 767px){.ecp-pro-descriptions__item[data-v-7d6cd376]{flex-direction:column}.ecp-pro-descriptions__label[data-v-7d6cd376]{flex-basis:auto}}

package/dist/types/index.d.ts

@@ -78,7 +78,7 @@ export interface ProFormProps {
     components?: Record<string, unknown>;
 }
 /** ProForm 内置表单项组件类型 */
-export type ProFormBuiltInComponent = 'input' | 'select' | 'api-select' | 'tree-select' | 'date-picker' | 'date-range' | 'input-number' | 'switch' | 'cascader' | 'checkbox' | 'radio';
+export type ProFormBuiltInComponent = 'input' | 'select' | 'api-select' | 'tree-select' | 'date-picker' | 'date-range' | 'input-number' | 'formatted-number' | 'switch' | 'cascader' | 'checkbox' | 'radio';
 /** 自定义组件：组件名（string）或 Vue 组件选项/构造函数（object | Function） */
 export type ProFormCustomComponent = string | object | ((...args: unknown[]) => unknown);
 /** ProForm 表单项配置 */
@@ -93,7 +93,7 @@ export interface ProFormSchema {
     colon?: boolean;
     /**
      * 组件类型：
-     * - 内置：'input' | 'select' | 'date-picker' | 'date-range' | 'input-number' | 'switch' | 'cascader' | 'checkbox' | 'radio'
+     * - 内置：'input' | 'select' | 'date-picker' | 'date-range' | 'input-number' | 'formatted-number' | 'switch' | 'cascader' | 'checkbox' | 'radio'
      * - 自定义组件名：任意字符串，对应全局或 ProForm 传入的 components 中注册的组件
      * - 内联组件：直接传入 Vue 组件选项对象或构造函数
      */

package/dist/utils/formattedNumber.d.ts

@@ -0,0 +1,16 @@
+/** 进位方式：向下取整、向上取整、四舍五入 */
+export type FormattedNumberRounding = 'floor' | 'ceil' | 'round';
+/** 仅保留数字、至多一个小数点、可选前导负号 */
+export declare function sanitizeNumericInput(raw: string): string;
+export declare function stripNumberGrouping(s: string): string;
+/** 按整数位数上限约束绝对值 */
+export declare function clampByIntegerDigits(value: number, integerDigits: number, decimalPlaces: number): number;
+export declare function roundToDecimals(value: number, decimalPlaces: number, rounding: FormattedNumberRounding): number;
+/**
+ * 解析 → 按整数位夹紧 → 按小数位与进位方式舍入 → 再夹紧（防止舍入后越界）
+ */
+export declare function normalizeNumericValue(value: number, integerDigits: number, decimalPlaces: number, rounding: FormattedNumberRounding): number;
+/** 千分位格式化展示（整数部分），小数部分固定 m 位 */
+export declare function formatWithThousands(value: number, decimalPlaces: number): string;
+/** 编辑态：无千分位，去掉多余尾部 0（在 m 位精度内） */
+export declare function numberToEditString(value: number, decimalPlaces: number): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aspire-ui/element-component-pro",
-  "version": "1.0.07",
+  "version": "1.0.08",
   "description": "Element UI 二次封装组件库，基于 Vue 2.7 + TypeScript + setup 语法糖，实现 VbenAdmin 风格的 Pro 组件",
   "type": "module",
   "main": "./dist/element-component-pro.umd.js",

package/src/ProForm/FormattedNumberInput.vue

@@ -0,0 +1,122 @@
+<template>
+  <el-input
+    :value="displayText"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    v-bind="$attrs"
+    @input="onInput"
+    @focus="onFocus"
+    @blur="onBlur"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import type { FormattedNumberRounding } from '../utils/formattedNumber'
+import {
+  formatWithThousands,
+  normalizeNumericValue,
+  numberToEditString,
+  sanitizeNumericInput,
+  stripNumberGrouping,
+} from '../utils/formattedNumber'
+
+const props = withDefaults(
+  defineProps<{
+    value?: unknown
+    placeholder?: string
+    disabled?: boolean
+    /** 整数部分允许的最大位数，默认 5 */
+    integerDigits?: number
+    /** 小数保留位数，默认 6 */
+    decimalPlaces?: number
+    /** 进位方式，默认四舍五入 */
+    rounding?: FormattedNumberRounding
+  }>(),
+  {
+    integerDigits: 5,
+    decimalPlaces: 6,
+    rounding: 'round',
+  }
+)
+
+const emit = defineEmits<{ (e: 'input', value: unknown): void }>()
+
+const focused = ref(false)
+const displayText = ref('')
+
+const intN = () => Math.max(0, Math.floor(props.integerDigits ?? 5))
+const decM = () => Math.max(0, Math.floor(props.decimalPlaces ?? 6))
+
+function parseExternalToNumber(v: unknown): number | null {
+  if (v === null || v === undefined || v === '') return null
+  if (typeof v === 'number') {
+    return Number.isFinite(v) ? v : null
+  }
+  const s = stripNumberGrouping(String(v))
+  if (s === '' || s === '-') return null
+  const num = Number(s)
+  return Number.isFinite(num) ? num : null
+}
+
+function syncDisplayFromValue() {
+  if (focused.value) return
+  const num = parseExternalToNumber(props.value)
+  if (num === null) {
+    displayText.value = ''
+    return
+  }
+  displayText.value = formatWithThousands(
+    normalizeNumericValue(num, intN(), decM(), props.rounding),
+    decM()
+  )
+}
+
+watch(
+  () => [props.value, props.integerDigits, props.decimalPlaces, props.rounding],
+  () => syncDisplayFromValue(),
+  { immediate: true, deep: true }
+)
+
+function onInput(val: string) {
+  const clean = sanitizeNumericInput(val)
+  displayText.value = clean
+  if (clean === '' || clean === '-') return
+  const num = Number(clean)
+  if (!Number.isFinite(num)) return
+  emit('input', num)
+}
+
+function onFocus() {
+  focused.value = true
+  const raw = stripNumberGrouping(displayText.value)
+  const num = parseExternalToNumber(raw === '' ? props.value : raw)
+  if (num === null) {
+    displayText.value = ''
+    return
+  }
+  displayText.value = numberToEditString(
+    normalizeNumericValue(num, intN(), decM(), props.rounding),
+    decM()
+  )
+}
+
+function onBlur() {
+  focused.value = false
+  const raw = stripNumberGrouping(displayText.value)
+  if (raw === '' || raw === '-') {
+    displayText.value = ''
+    emit('input', undefined)
+    return
+  }
+  const parsed = Number(sanitizeNumericInput(raw))
+  if (!Number.isFinite(parsed)) {
+    displayText.value = ''
+    emit('input', undefined)
+    return
+  }
+  const final = normalizeNumericValue(parsed, intN(), decM(), props.rounding)
+  displayText.value = formatWithThousands(final, decM())
+  emit('input', final)
+}
+</script>

package/src/ProForm/ProFormItem.vue

@@ -64,6 +64,15 @@
           v-bind="effectiveComponentProps"
           v-on="effectiveComponentListeners"
         />
+        <FormattedNumberInput
+          v-else-if="schema.component === 'formatted-number'"
+          :value="formModel[schema.field]"
+          :placeholder="schema.placeholder || (autoPlaceholder ? `请输入${schema.label}` : undefined)"
+          :disabled="effectiveDisabled"
+          v-bind="effectiveComponentProps"
+          v-on="effectiveComponentListeners"
+          @input="setFieldValue"
+        />
         <el-select
           class="ecp-pro-form-item__select"
           v-else-if="schema.component === 'select'"
@@ -171,12 +180,14 @@
 <script setup lang="ts">
 import { computed, useSlots, h } from 'vue'
 import ApiSelect from './ApiSelect.vue'
+import FormattedNumberInput from './FormattedNumberInput.vue'
 import TreeSelect from './TreeSelect.vue'
 import type { ProFormSchema, RenderCallbackParams } from '../types'
 import { normalizeTooltipConfig } from '../utils/tooltip'
 
 const BUILT_IN_COMPONENTS: Set<string> = new Set([
   'input', 'select', 'api-select', 'tree-select', 'date-picker', 'date-range', 'input-number',
+  'formatted-number',
   'switch', 'cascader', 'checkbox', 'radio',
 ])
 

package/src/ProForm/index.ts

@@ -1,6 +1,7 @@
 import ProForm from './ProForm.vue'
 import ProFormItem from './ProFormItem.vue'
 import FormActions from './FormActions.vue'
+import FormattedNumberInput from './FormattedNumberInput.vue'
 import { useForm } from './useForm'
-export { ProForm, ProFormItem, FormActions, useForm }
+export { ProForm, ProFormItem, FormActions, FormattedNumberInput, useForm }
 export default ProForm

package/src/index.ts

@@ -1,13 +1,13 @@
 import type { VueConstructor } from 'vue'
 import ProTable, { TableAction } from './ProTable'
-import ProForm, { ProFormItem, FormActions } from './ProForm'
+import ProForm, { ProFormItem, FormActions, FormattedNumberInput } from './ProForm'
 import ProDescriptions from './ProDescriptions'
 import { useForm } from './ProForm/useForm'
 import { useDescription } from './ProDescriptions/useDescription'
 import { useProTable } from './ProTable/useProTable'
 import { useComponentSetting } from './useComponentSetting'
 
-export { ProForm, ProFormItem, FormActions, useForm }
+export { ProForm, ProFormItem, FormActions, FormattedNumberInput, useForm }
 export { ProTable, useProTable, TableAction }
 export { ProDescriptions, useDescription }
 export { useComponentSetting }
@@ -16,6 +16,7 @@ export type { UseProTableReturn, UseProTablePropsReactive } from './ProTable/use
 export type { UseDescriptionReturn, UseDescriptionPropsReactive } from './ProDescriptions/useDescription'
 export * from './ProTable/types'
 export * from './types'
+export * from './utils/formattedNumber'
 
 const components = [
   { name: 'ProTable', component: ProTable },
@@ -23,6 +24,7 @@ const components = [
   { name: 'ProForm', component: ProForm },
   { name: 'ProFormItem', component: ProFormItem },
   { name: 'FormActions', component: FormActions },
+  { name: 'FormattedNumberInput', component: FormattedNumberInput },
   { name: 'ProDescriptions', component: ProDescriptions },
 ]
 
@@ -38,4 +40,5 @@ export default {
   ProForm,
   ProDescriptions,
   TableAction,
+  FormattedNumberInput,
 }

package/src/types/index.ts

@@ -93,6 +93,7 @@ export type ProFormBuiltInComponent =
   | 'date-picker'
   | 'date-range'
   | 'input-number'
+  | 'formatted-number'
   | 'switch'
   | 'cascader'
   | 'checkbox'
@@ -113,7 +114,7 @@ export interface ProFormSchema {
   colon?: boolean
   /**
    * 组件类型：
-   * - 内置：'input' | 'select' | 'date-picker' | 'date-range' | 'input-number' | 'switch' | 'cascader' | 'checkbox' | 'radio'
+   * - 内置：'input' | 'select' | 'date-picker' | 'date-range' | 'input-number' | 'formatted-number' | 'switch' | 'cascader' | 'checkbox' | 'radio'
    * - 自定义组件名：任意字符串，对应全局或 ProForm 传入的 components 中注册的组件
    * - 内联组件：直接传入 Vue 组件选项对象或构造函数
    */

package/src/utils/formattedNumber.ts

@@ -0,0 +1,118 @@
+/** 进位方式：向下取整、向上取整、四舍五入 */
+export type FormattedNumberRounding = 'floor' | 'ceil' | 'round'
+
+/** 仅保留数字、至多一个小数点、可选前导负号 */
+export function sanitizeNumericInput(raw: string): string {
+  const t = raw.trim()
+  if (!t) return ''
+  let i = 0
+  let res = ''
+  if (t[0] === '-') {
+    res = '-'
+    i = 1
+  }
+  let dot = false
+  for (; i < t.length; i++) {
+    const c = t[i]
+    if (c >= '0' && c <= '9') {
+      res += c
+      continue
+    }
+    if (c === '.' && !dot) {
+      dot = true
+      if (res === '' || res === '-') res += '0'
+      res += '.'
+    }
+  }
+  return res
+}
+
+export function stripNumberGrouping(s: string): string {
+  return s.replace(/,/g, '').trim()
+}
+
+function maxAbsValue(integerDigits: number, decimalPlaces: number): number {
+  const maxInt = Math.pow(10, integerDigits) - 1
+  if (decimalPlaces <= 0) return maxInt
+  return maxInt + (1 - Math.pow(10, -decimalPlaces))
+}
+
+/** 按整数位数上限约束绝对值 */
+export function clampByIntegerDigits(
+  value: number,
+  integerDigits: number,
+  decimalPlaces: number
+): number {
+  const max = maxAbsValue(integerDigits, decimalPlaces)
+  const sign = value < 0 ? -1 : 1
+  const abs = Math.abs(value)
+  if (abs <= max) return value
+  return sign * max
+}
+
+export function roundToDecimals(
+  value: number,
+  decimalPlaces: number,
+  rounding: FormattedNumberRounding
+): number {
+  if (decimalPlaces <= 0) {
+    switch (rounding) {
+      case 'floor':
+        return Math.floor(value)
+      case 'ceil':
+        return Math.ceil(value)
+      default:
+        return Math.round(value)
+    }
+  }
+  const factor = Math.pow(10, decimalPlaces)
+  const x = value * factor
+  let y: number
+  switch (rounding) {
+    case 'floor':
+      y = Math.floor(x)
+      break
+    case 'ceil':
+      y = Math.ceil(x)
+      break
+    default:
+      y = Math.round(x)
+  }
+  return y / factor
+}
+
+/**
+ * 解析 → 按整数位夹紧 → 按小数位与进位方式舍入 → 再夹紧（防止舍入后越界）
+ */
+export function normalizeNumericValue(
+  value: number,
+  integerDigits: number,
+  decimalPlaces: number,
+  rounding: FormattedNumberRounding
+): number {
+  let v = clampByIntegerDigits(value, integerDigits, decimalPlaces)
+  v = roundToDecimals(v, decimalPlaces, rounding)
+  v = clampByIntegerDigits(v, integerDigits, decimalPlaces)
+  return v
+}
+
+/** 千分位格式化展示（整数部分），小数部分固定 m 位 */
+export function formatWithThousands(value: number, decimalPlaces: number): string {
+  if (Number.isNaN(value) || !Number.isFinite(value)) return ''
+  const fixed = value.toFixed(Math.max(0, decimalPlaces))
+  const neg = fixed.startsWith('-')
+  const body = neg ? fixed.slice(1) : fixed
+  const [intPart, decPart] = body.split('.')
+  const withSep = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  if (decimalPlaces <= 0 || decPart === undefined) return (neg ? '-' : '') + withSep
+  return (neg ? '-' : '') + withSep + '.' + decPart
+}
+
+/** 编辑态：无千分位，去掉多余尾部 0（在 m 位精度内） */
+export function numberToEditString(value: number, decimalPlaces: number): string {
+  if (Number.isNaN(value) || !Number.isFinite(value)) return ''
+  let s = value.toFixed(Math.max(0, decimalPlaces))
+  s = s.replace(/(\.\d*?)0+$/, '$1')
+  s = s.replace(/\.$/, '')
+  return s
+}