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

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/ProForm.vue

@@ -9,7 +9,7 @@
           <el-col v-if="shouldShow(schema)" :key="schema.field" v-bind="getColProps(schema)"
             :offset="schema.colProps?.offset ?? effectiveProps.baseColProps?.offset ?? 0" :data-field="schema.field">
             <ProFormItem :schema="schema" :form-model="currentFormModel" :form-disabled="effectiveProps.disabled"
-              :auto-placeholder="effectiveProps.autoSetPlaceholder" :form-action-type="formActionRef"
+              :auto-placeholder="effectiveProps.autoSetPlaceholder" :form-action-type="formActionRef" :colon="effectiveProps.colon"
               :custom-components="formCustomComponents" :on-field-change="handleFieldChange">
               <template v-if="slots[getSlotName(schema)]">
                 <slot :name="getSlotName(schema)" :model="currentFormModel" :schema="schema" :field="schema.field"
@@ -69,6 +69,7 @@ const props = withDefaults(
     initialValues?: Record<string, unknown>
     labelWidth?: string
     labelPosition?: 'left' | 'right' | 'top'
+    colon?: boolean
     gutter?: number
     size?: 'medium' | 'small' | 'large'
     disabled?: boolean
@@ -96,6 +97,7 @@ const props = withDefaults(
   {
     labelWidth: '120px',
     labelPosition: 'right',
+    colon: true,
     gutter: 24,
     size: 'medium',
     autoSetPlaceholder: true,

package/src/ProForm/ProFormItem.vue

@@ -8,7 +8,9 @@
     :label-width="schema.labelWidth"
   >
     <template slot="label">
-      <span>{{ schema.label }}</span>
+      <span>
+        {{ schema.label }}<span v-if="showColon" class="ecp-pro-form-item__colon">:</span>
+      </span>
       <el-tooltip
         v-if="schema.helpMessage"
         placement="top"
@@ -35,131 +37,142 @@
     <!-- 默认组件渲染 -->
     <template v-else>
       <!-- 自定义 component：组件名或内联组件 -->
-      <component
-        v-if="resolvedCustomComponent"
-        :is="resolvedCustomComponent"
-        :value="formModel[schema.field]"
-        @input="setFieldValue"
-        :placeholder="schema.placeholder || (autoPlaceholder ? `请输入${schema.label}` : undefined)"
-        :disabled="effectiveDisabled"
-        v-bind="effectiveComponentProps"
-        v-on="effectiveComponentListeners"
-      />
-      <el-input
-        v-else-if="schema.component === 'input' || !schema.component"
-        v-model="formModel[schema.field]"
-        :placeholder="schema.placeholder || (autoPlaceholder ? `请输入${schema.label}` : undefined)"
-        :disabled="effectiveDisabled"
-        v-bind="effectiveComponentProps"
-        v-on="effectiveComponentListeners"
-      />
-      <el-input-number
-        v-else-if="schema.component === 'input-number'"
-        v-model="formModel[schema.field]"
-        :placeholder="schema.placeholder"
-        :disabled="effectiveDisabled"
-        v-bind="effectiveComponentProps"
-        v-on="effectiveComponentListeners"
-      />
-      <el-select
-        class="ecp-pro-form-item__select"
-        v-else-if="schema.component === 'select'"
-        v-model="formModel[schema.field]"
-        :placeholder="schema.placeholder || (autoPlaceholder ? `请选择${schema.label}` : undefined)"
-        :disabled="effectiveDisabled"
-        v-bind="effectiveComponentProps"
-        v-on="effectiveComponentListeners"
-      >
-        <el-option
-          v-for="opt in (getOptions(effectiveComponentProps) || [])"
-          :key="String(opt.value)"
-          :label="opt.label"
-          :value="opt.value"
+      <component :is="fieldWrapperComponent" v-bind="fieldWrapperProps">
+        <component
+          v-if="resolvedCustomComponent"
+          :is="resolvedCustomComponent"
+          :value="formModel[schema.field]"
+          @input="setFieldValue"
+          :placeholder="schema.placeholder || (autoPlaceholder ? `请输入${schema.label}` : undefined)"
+          :disabled="effectiveDisabled"
+          v-bind="effectiveComponentProps"
+          v-on="effectiveComponentListeners"
         />
-      </el-select>
-      <ApiSelect
-        v-else-if="schema.component === 'api-select'"
-        :value="formModel[schema.field]"
-        :placeholder="schema.placeholder || (autoPlaceholder ? `请选择${schema.label}` : undefined)"
-        :disabled="effectiveDisabled"
-        v-bind="effectiveComponentProps"
-        v-on="effectiveComponentListeners"
-        @input="setFieldValue"
-      />
-      <TreeSelect
-        v-else-if="schema.component === 'tree-select'"
-        :value="formModel[schema.field]"
-        :placeholder="schema.placeholder || (autoPlaceholder ? `请选择${schema.label}` : undefined)"
-        :disabled="effectiveDisabled"
-        v-bind="effectiveComponentProps"
-        v-on="effectiveComponentListeners"
-        @input="setFieldValue"
-      />
-      <el-date-picker
-        v-else-if="schema.component === 'date-picker'"
-        v-model="formModel[schema.field]"
-        :placeholder="schema.placeholder || (autoPlaceholder ? `请选择${schema.label}` : undefined)"
-        :disabled="effectiveDisabled"
-        v-bind="effectiveComponentProps"
-        v-on="effectiveComponentListeners"
-      />
-      <el-date-picker
-        v-else-if="schema.component === 'date-range'"
-        v-model="formModel[schema.field]"
-        type="daterange"
-        range-separator="至"
-        start-placeholder="开始日期"
-        end-placeholder="结束日期"
-        value-format="yyyy-MM-dd"
-        :disabled="effectiveDisabled"
-        v-bind="effectiveComponentProps"
-        v-on="effectiveComponentListeners"
-      />
-      <el-switch
-        v-else-if="schema.component === 'switch'"
-        v-model="formModel[schema.field]"
-        :disabled="effectiveDisabled"
-        v-bind="effectiveComponentProps"
-        v-on="effectiveComponentListeners"
-      />
-      <el-cascader
-        v-else-if="schema.component === 'cascader'"
-        v-model="formModel[schema.field]"
-        :placeholder="schema.placeholder || (autoPlaceholder ? `请选择${schema.label}` : undefined)"
-        :disabled="effectiveDisabled"
-        v-bind="effectiveComponentProps"
-        v-on="effectiveComponentListeners"
-      />
-      <el-checkbox-group
-        v-else-if="schema.component === 'checkbox'"
-        v-model="formModel[schema.field]"
-        :disabled="effectiveDisabled"
-        v-bind="effectiveComponentProps"
-        v-on="effectiveComponentListeners"
-      >
-        <el-checkbox
-          v-for="opt in (getOptions(effectiveComponentProps) || [])"
-          :key="String(opt.value)"
-          :label="opt.value"
+        <el-input
+          v-else-if="schema.component === 'input' || !schema.component"
+          v-model="formModel[schema.field]"
+          :placeholder="schema.placeholder || (autoPlaceholder ? `请输入${schema.label}` : undefined)"
+          :disabled="effectiveDisabled"
+          v-bind="effectiveComponentProps"
+          v-on="effectiveComponentListeners"
+        />
+        <el-input-number
+          v-else-if="schema.component === 'input-number'"
+          v-model="formModel[schema.field]"
+          :placeholder="schema.placeholder"
+          :disabled="effectiveDisabled"
+          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'"
+          v-model="formModel[schema.field]"
+          :placeholder="schema.placeholder || (autoPlaceholder ? `请选择${schema.label}` : undefined)"
+          :disabled="effectiveDisabled"
+          v-bind="effectiveComponentProps"
+          v-on="effectiveComponentListeners"
         >
-          {{ opt.label }}
-        </el-checkbox>
-      </el-checkbox-group>
-      <el-radio-group
-        v-else-if="schema.component === 'radio'"
-        v-model="formModel[schema.field]"
-        :disabled="effectiveDisabled"
-        v-bind="effectiveComponentProps"
-        v-on="effectiveComponentListeners"
-      >
-        <el-radio
-          v-for="opt in (getOptions(effectiveComponentProps) || [])"
-          :key="String(opt.value)"
-          :label="opt.value"
+          <el-option
+            v-for="opt in (getOptions(effectiveComponentProps) || [])"
+            :key="String(opt.value)"
+            :label="opt.label"
+            :value="opt.value"
+          />
+        </el-select>
+        <ApiSelect
+          v-else-if="schema.component === 'api-select'"
+          :value="formModel[schema.field]"
+          :placeholder="schema.placeholder || (autoPlaceholder ? `请选择${schema.label}` : undefined)"
+          :disabled="effectiveDisabled"
+          v-bind="effectiveComponentProps"
+          v-on="effectiveComponentListeners"
+          @input="setFieldValue"
+        />
+        <TreeSelect
+          v-else-if="schema.component === 'tree-select'"
+          :value="formModel[schema.field]"
+          :placeholder="schema.placeholder || (autoPlaceholder ? `请选择${schema.label}` : undefined)"
+          :disabled="effectiveDisabled"
+          v-bind="effectiveComponentProps"
+          v-on="effectiveComponentListeners"
+          @input="setFieldValue"
+        />
+        <el-date-picker
+          v-else-if="schema.component === 'date-picker'"
+          v-model="formModel[schema.field]"
+          :placeholder="schema.placeholder || (autoPlaceholder ? `请选择${schema.label}` : undefined)"
+          :disabled="effectiveDisabled"
+          v-bind="effectiveComponentProps"
+          v-on="effectiveComponentListeners"
+        />
+        <el-date-picker
+          v-else-if="schema.component === 'date-range'"
+          v-model="formModel[schema.field]"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          :disabled="effectiveDisabled"
+          v-bind="effectiveComponentProps"
+          v-on="effectiveComponentListeners"
+        />
+        <el-switch
+          v-else-if="schema.component === 'switch'"
+          v-model="formModel[schema.field]"
+          :disabled="effectiveDisabled"
+          v-bind="effectiveComponentProps"
+          v-on="effectiveComponentListeners"
+        />
+        <el-cascader
+          v-else-if="schema.component === 'cascader'"
+          v-model="formModel[schema.field]"
+          :placeholder="schema.placeholder || (autoPlaceholder ? `请选择${schema.label}` : undefined)"
+          :disabled="effectiveDisabled"
+          v-bind="effectiveComponentProps"
+          v-on="effectiveComponentListeners"
+        />
+        <el-checkbox-group
+          v-else-if="schema.component === 'checkbox'"
+          v-model="formModel[schema.field]"
+          :disabled="effectiveDisabled"
+          v-bind="effectiveComponentProps"
+          v-on="effectiveComponentListeners"
         >
-          {{ opt.label }}
-        </el-radio>
-      </el-radio-group>
+          <el-checkbox
+            v-for="opt in (getOptions(effectiveComponentProps) || [])"
+            :key="String(opt.value)"
+            :label="opt.value"
+          >
+            {{ opt.label }}
+          </el-checkbox>
+        </el-checkbox-group>
+        <el-radio-group
+          v-else-if="schema.component === 'radio'"
+          v-model="formModel[schema.field]"
+          :disabled="effectiveDisabled"
+          v-bind="effectiveComponentProps"
+          v-on="effectiveComponentListeners"
+        >
+          <el-radio
+            v-for="opt in (getOptions(effectiveComponentProps) || [])"
+            :key="String(opt.value)"
+            :label="opt.value"
+          >
+            {{ opt.label }}
+          </el-radio>
+        </el-radio-group>
+      </component>
     </template>
   </el-form-item>
 </template>
@@ -167,11 +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',
 ])
 
@@ -180,6 +196,7 @@ const props = defineProps<{
   formModel: Record<string, unknown>
   formDisabled?: boolean
   autoPlaceholder?: boolean
+  colon?: boolean
   formActionType?: import('../types').FormActionType
   onFieldChange?: (field: string, value: unknown) => void
   /** 自定义组件映射（由 ProForm 传入） */
@@ -248,6 +265,17 @@ const effectiveComponentPropsAndListeners = computed(() => {
 
 const effectiveComponentProps = computed(() => effectiveComponentPropsAndListeners.value.props)
 const effectiveComponentListeners = computed(() => effectiveComponentPropsAndListeners.value.listeners)
+const showColon = computed(() => props.schema.colon ?? props.colon ?? false)
+
+const normalizedTooltip = computed(() => {
+  const tooltip = props.schema.tooltip
+  if (!tooltip) return null
+  const resolved = typeof tooltip === 'function' ? tooltip(renderParams.value) : tooltip
+  return normalizeTooltipConfig(resolved, props.formModel[props.schema.field])
+})
+
+const fieldWrapperComponent = computed(() => normalizedTooltip.value ? 'el-tooltip' : 'span')
+const fieldWrapperProps = computed(() => normalizedTooltip.value || {})
 
 const hasSlot = computed(() => !!slots.default)
 
@@ -286,6 +314,10 @@ const renderComponent = computed(() => {
 </script>
 
 <style scoped>
+.ecp-pro-form-item__colon {
+  margin-right: 2px;
+}
+
 .ecp-pro-form-item__help-icon {
   margin-left: 4px;
   color: #909399;

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/ProTable/TableAction.vue

@@ -84,6 +84,7 @@
 import { computed } from 'vue'
 import { MessageBox } from 'element-ui'
 import type { TableActionItem } from './types'
+import { normalizeTooltipConfig } from '../utils/tooltip'
 
 const props = withDefaults(
   defineProps<{
@@ -100,11 +101,7 @@ const props = withDefaults(
 )
 
 const normalizeTooltip = (tooltip?: TableActionItem['tooltip']) => {
-  if (!tooltip) return {}
-  if (typeof tooltip === 'string') {
-    return { content: tooltip }
-  }
-  return tooltip as Record<string, unknown>
+  return normalizeTooltipConfig(tooltip) || {}
 }
 
 const getButtonType = (action: TableActionItem) => {

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

@@ -60,6 +60,7 @@ export interface ProFormProps {
   initialValues?: Record<string, unknown>
   labelWidth?: string
   labelPosition?: 'left' | 'right' | 'top'
+  colon?: boolean
   gutter?: number
   size?: 'medium' | 'small' | 'large'
   disabled?: boolean
@@ -92,6 +93,7 @@ export type ProFormBuiltInComponent =
   | 'date-picker'
   | 'date-range'
   | 'input-number'
+  | 'formatted-number'
   | 'switch'
   | 'cascader'
   | 'checkbox'
@@ -108,9 +110,11 @@ export interface ProFormSchema {
   label: string
   /** 单个表单项标签宽度，优先级高于 Form 的 labelWidth */
   labelWidth?: string
+  /** 是否显示 label 冒号，优先级高于 ProForm 的 colon */
+  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 组件选项对象或构造函数
    */
@@ -147,6 +151,8 @@ export interface ProFormSchema {
   helpMessage?: string | string[]
   /** 温馨提示组件的 props */
   helpComponentProps?: Record<string, unknown>
+  /** 表单项 value 的 tooltip，true 时默认展示当前值，支持函数动态返回 */
+  tooltip?: boolean | string | Record<string, unknown> | ((params: RenderCallbackParams) => boolean | string | Record<string, unknown>)
 }
 
 /** ProDescriptions 描述项配置 */
@@ -195,6 +201,8 @@ export interface DescriptionSchema {
   slot?: string
   /** 自定义渲染 */
   render?: (value: unknown, record: Record<string, unknown>) => VNode | string | number | null | undefined
+  /** 描述项 value 的 tooltip，true 时默认展示当前值，支持函数动态返回 */
+  tooltip?: boolean | string | Record<string, unknown> | ((params: { value: unknown; record: Record<string, unknown>; schema: DescriptionSchema }) => boolean | string | Record<string, unknown>)
 }
 
 /** Description Props */