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

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,133 @@
     <!-- 默认组件渲染 -->
     <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"
+        />
+        <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>
@@ -169,6 +173,7 @@ import { computed, useSlots, h } from 'vue'
 import ApiSelect from './ApiSelect.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',
@@ -180,6 +185,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 +254,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 +303,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/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/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
@@ -108,6 +109,8 @@ 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'
@@ -147,6 +150,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 +200,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 */

package/src/utils/tooltip.ts

@@ -0,0 +1,56 @@
+export type TooltipValue = boolean | string | Record<string, unknown>
+
+export const hasTooltipContent = (value: unknown): boolean => {
+  if (Array.isArray(value)) return value.length > 0
+  return value !== undefined && value !== null && String(value).trim() !== ''
+}
+
+export const getTooltipContent = (value: unknown): string => {
+  if (Array.isArray(value)) {
+    return value.map((item) => String(item)).join(', ')
+  }
+  if (value === undefined || value === null) return ''
+  if (typeof value === 'object') return JSON.stringify(value)
+  return String(value)
+}
+
+export const normalizeTooltipConfig = (
+  tooltip: TooltipValue | null | undefined,
+  fallbackValue?: unknown
+): Record<string, unknown> | null => {
+  if (!tooltip) return null
+
+  if (tooltip === true) {
+    return {
+      content: getTooltipContent(fallbackValue),
+      placement: 'top',
+      effect: 'dark',
+      disabled: !hasTooltipContent(fallbackValue),
+    }
+  }
+
+  if (typeof tooltip === 'string') {
+    return {
+      content: tooltip,
+      placement: 'top',
+      effect: 'dark',
+    }
+  }
+
+  const normalized = { ...tooltip }
+  const hasExplicitContent = Object.prototype.hasOwnProperty.call(normalized, 'content')
+  if (!hasExplicitContent) {
+    normalized.content = getTooltipContent(fallbackValue)
+  }
+  if (!Object.prototype.hasOwnProperty.call(normalized, 'placement')) {
+    normalized.placement = 'top'
+  }
+  if (!Object.prototype.hasOwnProperty.call(normalized, 'effect')) {
+    normalized.effect = 'dark'
+  }
+  if (!Object.prototype.hasOwnProperty.call(normalized, 'disabled')) {
+    normalized.disabled = !hasTooltipContent(normalized.content)
+  }
+
+  return normalized
+}

package/src/vite-env.d.ts

@@ -1 +1,6 @@
 /// <reference types="vite/client" />
+
+declare module '*.md?raw' {
+  const content: string
+  export default content
+}