@veltra/desktop 1.1.36 → 1.2.0

package/src/components/form-item/helper.ts

@@ -1,5 +1,7 @@
 import { o } from '@cat-kit/core'
-import { bem, type BEM, type FormComponentProps } from '@veltra/utils'
+import { bem, type BEM, type FormFieldItem } from '@veltra/utils'
+
+import type { FormFieldComponentProps } from '../../types/form-field'
 
 /**
  * 获取表单项的属性
@@ -7,12 +9,16 @@ import { bem, type BEM, type FormComponentProps } from '@veltra/utils'
  * @returns
  */
 export function getFormItemProps(
-  props: FormComponentProps
-): Pick<FormComponentProps, 'label' | 'field' | 'readonly' | 'span' | 'tips'> {
+  props: FormFieldComponentProps
+): Pick<FormFieldComponentProps, 'label' | 'field' | 'readonly' | 'span' | 'tips'> {
   return o(props).pick(['label', 'field', 'readonly', 'span', 'tips']) as Pick<
-    FormComponentProps,
+    FormFieldComponentProps,
     'label' | 'field' | 'readonly' | 'span' | 'tips'
   >
 }
 
 export const formItemCls: BEM<'form-item'> = bem('form-item')
+
+export function defineField(field: FormFieldItem) {
+  return field
+}

package/src/components/form-item/validate.ts

@@ -0,0 +1,155 @@
+import { isEmpty, o } from '@cat-kit/core'
+import type { Undef } from '@veltra/utils'
+
+export type PresetRule = 'email' | 'phone' | 'num' | 'url' | 'idCard'
+
+/** 字段校验规则 */
+export interface ValidateRule {
+  /** 是否必填 */
+  required?: boolean | string
+  /** 长度单位 */
+  length?: number | [number, string]
+  /** 最小值 */
+  min?: number | [number, string]
+  /** 最大值 */
+  max?: number | [number, string]
+  /** 最小长度 */
+  minLen?: number | [number, string]
+  /** 最大长度 */
+  maxLen?: number | [number, string]
+  /** 匹配 */
+  match?: RegExp | [RegExp, string] | string
+  /** 预设 */
+  preset?: PresetRule
+  /** 自定义校验 */
+  validator?: (value: any, data: Record<string, any>) => Promise<string> | string
+}
+
+const presetRules: Record<PresetRule, (value: string) => string | undefined> = {
+  email(v) {
+    const re = /^([\w_-]+)@([\w-]+[.]?)*[\w]+\.[a-zA-Z]{2,10}$/
+    if (!re.test(v)) {
+      return '邮箱格式不正确'
+    }
+  },
+  phone(v) {
+    const re = /^\d{11}$/
+    if (!re.test(v)) {
+      return '手机号格式不正确'
+    }
+  },
+  num(v) {
+    const re = /^\d+$/
+    if (!re.test(v)) {
+      return '数字格式不正确'
+    }
+  },
+  url(v) {
+    const re = /^(ftp|https?):\/\/([\w_-]+)\.([\w-]+[.]?)*[\w]+\.[a-zA-Z]{2,10}(.*)/
+    if (!re.test(v)) {
+      return '链接格式不正确'
+    }
+  },
+
+  idCard(v) {
+    const re = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/
+    if (!re.test(v)) {
+      return '身份证格式不正确'
+    }
+  }
+}
+
+/** 预设规则 */
+const ruleTypes = {
+  required(value: any, required: ValidateRule['required']): Undef<string> {
+    if (required === false) return
+
+    const errMsg = typeof required === 'string' ? required : '该项不能为空'
+    if (isEmpty(value)) return errMsg
+
+    if (Array.isArray(value) && !value.length) return errMsg
+    if (typeof value === 'string' && !value) return errMsg
+  },
+  min(value: any, rule: ValidateRule['min']): Undef<string> {
+    if (isEmpty(value)) return
+    let _rule = Array.isArray(rule) ? rule[0] : rule!
+    let errMsg = Array.isArray(rule) ? rule[1] : `该项必须大于等于${_rule}`
+    if (typeof value !== 'number') return `${value}不是一个数字`
+    if (value < _rule) return errMsg
+  },
+  max(value: any, rule: ValidateRule['max']): Undef<string> {
+    if (isEmpty(value)) return
+    let _rule = Array.isArray(rule) ? rule[0] : rule!
+    let errMsg = Array.isArray(rule) ? rule[1] : `该项必须小于等于${_rule}`
+    if (typeof value !== 'number') return `${value}不是一个数字`
+    if (value > _rule) return errMsg
+  },
+
+  minLen(value: any, rule: ValidateRule['minLen']): Undef<string> {
+    if (isEmpty(value)) return
+    let _rule = Array.isArray(rule) ? rule[0] : rule!
+    let errMsg = Array.isArray(rule) ? rule[1] : `该项长度必须大于等于${_rule}`
+    if (!Array.isArray(value) && typeof value !== 'string') return `${value}不是一个字符串或数组`
+    if (value.length < _rule) return errMsg
+  },
+  maxLen(value: any, rule: ValidateRule['maxLen']): Undef<string> {
+    if (isEmpty(value)) return
+    let _rule = Array.isArray(rule) ? rule[0] : rule!
+    let errMsg = Array.isArray(rule) ? rule[1] : `该项长度必须小于等于:${_rule}`
+    if (!Array.isArray(value) && typeof value !== 'string') return `${value}不是一个字符串或数组`
+    if (value.length > _rule) return errMsg
+  },
+  match(value: any, rule: ValidateRule['match']): Undef<string> {
+    if (isEmpty(value) || value === '') return
+    if (typeof rule === 'string') {
+      if (!rule) return
+      rule = new RegExp(rule)
+    }
+    let _rule = Array.isArray(rule) ? rule[0] : rule!
+    let errMsg = Array.isArray(rule) ? rule[1] : `该项不匹配正则:${_rule}`
+    if (typeof value !== 'string') return `${value}不是一个字符串`
+    if (!_rule.test(value)) return errMsg
+  },
+  preset(value: any, rule: ValidateRule['preset']): Undef<string> {
+    if (isEmpty(value) || value === '' || !rule) return
+    if (typeof value !== 'string') return `${value}不是一个字符串`
+    const ruleValidator = presetRules[rule]
+    return ruleValidator(value)
+  }
+}
+
+export async function validateField(
+  formData: Record<string, any>,
+  field: string,
+  rules: ValidateRule
+): Promise<Undef<string>> {
+  const value = o(formData).get(field)
+
+  if (!rules) return
+
+  const { validator, required, ...normalRules } = rules
+
+  // 必填要先去校验
+  if (required) {
+    const err = ruleTypes.required(value, required)
+    if (err) return err
+  }
+
+  // 校验规则
+  for (const ruleKey in normalRules) {
+    const validate = ruleTypes[ruleKey as keyof typeof ruleTypes]
+    if (!validate) continue
+
+    const err = validate(value, normalRules[ruleKey])
+
+    if (err) return err
+  }
+
+  // 自定义校验最火校验
+  if (validator) {
+    const err = await validator(value, formData)
+    if (err) return err
+  }
+
+  return
+}

package/src/components/rich-text-editor/rich-text-editor.vue

@@ -152,30 +152,33 @@ function initEditor() {
   // Listen for content changes
   cleanupFns.push(
     editorInstance.registerUpdateListener(({ editorState }) => {
-      editorState.read(() => {
-        const root = $getRoot()
-        const textContent = root.getTextContent()
-        showPlaceholder.value = textContent.trim().length === 0
-
-        if (isComposing) return
-
-        let value: string
-        if (props.format === 'json') {
-          value = JSON.stringify(editorState.toJSON())
-        } else {
-          value = $generateHtmlFromNodes(editorInstance)
-        }
-
-        // Avoid circular updates: only emit if content really changed
-        if (value !== model.value) {
-          isComposing = true
-          model.value = value
-          // Use microtask to reset after Vue processes the update
-          queueMicrotask(() => {
-            isComposing = false
-          })
-        }
-      })
+      editorState.read(
+        () => {
+          const root = $getRoot()
+          const textContent = root.getTextContent()
+          showPlaceholder.value = textContent.trim().length === 0
+
+          if (isComposing) return
+
+          let value: string
+          if (props.format === 'json') {
+            value = JSON.stringify(editorState.toJSON())
+          } else {
+            value = $generateHtmlFromNodes(editorInstance)
+          }
+
+          // Avoid circular updates: only emit if content really changed
+          if (value !== model.value) {
+            isComposing = true
+            model.value = value
+            // Use microtask to reset after Vue processes the update
+            queueMicrotask(() => {
+              isComposing = false
+            })
+          }
+        },
+        { editor: editorInstance }
+      )
     })
   )
 
@@ -229,7 +232,7 @@ watch(model, (newVal) => {
   const editorInstance = editor.value
 
   // Compare current content to avoid circular updates
-  editorInstance.getEditorState().read(() => {
+  editorInstance.read(() => {
     let currentValue: string
     if (props.format === 'json') {
       currentValue = JSON.stringify(editorInstance.getEditorState().toJSON())

package/src/components/rich-text-editor/toolbar.vue

@@ -84,12 +84,15 @@ let cleanupListener: (() => void) | null = null
 function setupListener(editorInstance: LexicalEditor) {
   cleanupListener?.()
   cleanupListener = editorInstance.registerUpdateListener(({ editorState }) => {
-    editorState.read(() => {
-      const selection = $getSelection()
-      if (!$isRangeSelection(selection)) return
+    editorState.read(
+      () => {
+        const selection = $getSelection()
+        if (!$isRangeSelection(selection)) return
 
-      updateToolbarState(selection)
-    })
+        updateToolbarState(selection)
+      },
+      { editor: editorInstance }
+    )
   })
 }
 
@@ -235,24 +238,25 @@ function onHeadingChange(event: Event) {
 }
 
 function toggleLink(editorInstance: LexicalEditor) {
-  editorInstance.getEditorState().read(() => {
+  let shouldRemoveLink = false
+
+  editorInstance.read(() => {
     const selection = $getSelection()
     if (!$isRangeSelection(selection)) return
 
-    const anchorNode = selection.anchor.getNode()
-    const parent = anchorNode.getParent()
-
-    if ($isLinkNode(parent)) {
-      // Remove link
-      editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, null)
-    } else {
-      // Insert link with prompt
-      const url = prompt('请输入链接地址:', 'https://')
-      if (url && url !== 'https://') {
-        editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, url)
-      }
-    }
+    const parent = selection.anchor.getNode().getParent()
+    shouldRemoveLink = $isLinkNode(parent)
   })
+
+  if (shouldRemoveLink) {
+    editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, null)
+    return
+  }
+
+  const url = prompt('请输入链接地址:', 'https://')
+  if (url && url !== 'https://') {
+    editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, url)
+  }
 }
 
 function getTitle(item: ToolbarItem): string {

package/src/components/select/select.vue

@@ -209,14 +209,16 @@ watch(
 
     if (!options?.length) return
 
-    if (modelValue !== undefined) {
-      const { valueKey } = props
-      currentIndex.value = options.findIndex((option) => o(option).get(valueKey) === modelValue)
+    const { valueKey, labelKey } = props
 
-      selected.value = options[currentIndex.value]
+    if (modelValue !== undefined && modelValue !== null && modelValue !== '') {
+      currentIndex.value = options.findIndex((option) => o(option).get(valueKey) === modelValue)
+      selected.value = currentIndex.value >= 0 ? options[currentIndex.value] : undefined
+      label.value = selected.value ? o(selected.value).get(labelKey) : undefined
     } else {
       currentIndex.value = -1
       selected.value = undefined
+      label.value = undefined
     }
   },
   { immediate: true }

package/src/components/slider/slider.vue

@@ -113,10 +113,20 @@ const ticks = computed(() => {
 watch(
   [offset1, offset2],
   userAction((v) => {
+    if (sliderSize.value === 0) return
+
     if (props.range) {
-      emit('update:modelValue', v.map(sliderOffset2Value).toSorted() as T)
+      const next = v.map(sliderOffset2Value).toSorted((a, b) => a - b) as [number, number]
+      const current = props.modelValue as [number, number] | undefined
+      if (current) {
+        const [a, b] = [...current].sort((x, y) => x - y)
+        if (next[0] === a && next[1] === b) return
+      }
+      emit('update:modelValue', next as T)
     } else {
-      emit('update:modelValue', sliderOffset2Value(v[0]) as T)
+      const next = sliderOffset2Value(v[0])
+      if (next === props.modelValue) return
+      emit('update:modelValue', next as T)
     }
   })
 )

package/src/types/auto-complete.ts

@@ -1,7 +1,9 @@
-import type { FormComponentProps, DeconstructValue } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
+
+import type { FormFieldComponentProps } from './form-field'
 
 /** 自动补全组件组件属性 */
-export interface AutoCompleteProps extends FormComponentProps {
+export interface AutoCompleteProps extends FormFieldComponentProps {
   modelValue?: string
   /** 占位符 */
   placeholder?: string

package/src/types/batch-edit.ts

@@ -1,7 +1,6 @@
 import type { DeconstructValue } from '@veltra/utils'
 
 import type { ActionProps } from './action'
-import type { IFormModel } from './form'
 import type { TableColumn, TableEmits, TableProps, TableRow } from './table'
 
 /** 批量编辑列 */
@@ -20,12 +19,12 @@ export interface BatchEditColumn extends TableColumn {
 export type BatchEditFeature = 'create' | 'update' | 'copy' | 'delete' | 'view' | 'createChild'
 
 /** 批量编辑组件属性 */
-export interface BatchEditProps<Model extends IFormModel = IFormModel> extends TableProps {
+export interface BatchEditProps extends TableProps {
   /**
-   * 表单模型
-   * @description 该模型优先级要大于列配置
+   * 表单数据
+   * @description 与右侧 UForm 绑定的 reactive 对象
    */
-  model?: Model
+  model?: Record<string, any>
   /** 表格标题 */
   title?: string
   /**

package/src/types/cascade.ts

@@ -1,5 +1,7 @@
 import type { TreeNode } from '@cat-kit/core'
-import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
+
+import type { FormFieldComponentProps } from './form-field'
 
 export interface CascadeNode<
   Data extends Record<string, any> = Record<string, any>
@@ -10,7 +12,7 @@ export interface CascadeNode<
 }
 
 /** 级联选择器组件属性 */
-export interface CascadeProps extends FormComponentProps {
+export interface CascadeProps extends FormFieldComponentProps {
   /**
    * 分隔符
    * @default '/'

package/src/types/checkbox-group.ts

@@ -1,7 +1,7 @@
-import type { FormComponentProps } from '@veltra/utils'
+import type { FormFieldComponentProps } from './form-field'
 
 /** 复选框组, 用来选择一组数据组件属性 */
-export interface CheckboxGroupProps extends FormComponentProps {
+export interface CheckboxGroupProps extends FormFieldComponentProps {
   /** 值 */
   modelValue?: Array<any>
   /** 复选框项 */

package/src/types/checkbox.ts

@@ -1,14 +1,16 @@
-import type { ColorType, FormComponentProps } from '@veltra/utils'
+import type { ColorType } from '@veltra/utils'
+
+import type { FormFieldComponentProps } from './form-field'
 
 /** 复选框组件属性 */
-export interface CheckboxProps extends FormComponentProps {
+export interface CheckboxProps extends FormFieldComponentProps {
   /** 部分选中 */
   indeterminate?: boolean
   /** 是否选中  */
   modelValue?: boolean
 }
 
-export interface CheckboxButtonProps extends FormComponentProps {
+export interface CheckboxButtonProps extends FormFieldComponentProps {
   /** 是否选中  */
   modelValue?: boolean
   /** 是否圆角 */

package/src/types/code-editor.ts

@@ -1,9 +1,11 @@
-import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
+
+import type { FormFieldComponentProps } from './form-field'
 
 export type CodeEditorLang = 'js' | 'sql' | 'java' | 'json'
 
 /** 代码编辑器组件属性（不支持 `size`） */
-export interface CodeEditorProps extends Omit<FormComponentProps, 'size'> {
+export interface CodeEditorProps extends Omit<FormFieldComponentProps, 'size'> {
   modelValue?: string
   /** 定义语言 */
   language?: CodeEditorLang

package/src/types/date-picker.ts

@@ -1,8 +1,10 @@
 import type { Dater } from '@cat-kit/core'
-import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
+
+import type { FormFieldComponentProps } from './form-field'
 
 /** date-picker组件属性 */
-export interface DatePickerProps extends FormComponentProps {
+export interface DatePickerProps extends FormFieldComponentProps {
   modelValue?: string | number | Date
   /** 占位 */
   placeholder?: string

package/src/types/date-range-picker.ts

@@ -1,8 +1,10 @@
 import type { Dater } from '@cat-kit/core'
-import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
+
+import type { FormFieldComponentProps } from './form-field'
 
 /** date-range-picker组件属性 */
-export interface DateRangePickerProps extends FormComponentProps {
+export interface DateRangePickerProps extends FormFieldComponentProps {
   modelValue?: [string, string]
   /** 占位 */
   placeholder?: [string, string]

package/src/types/expression-editor.ts

@@ -1,4 +1,6 @@
-import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
+
+import type { FormFieldComponentProps } from './form-field'
 
 export interface VariableItem {
   label: string
@@ -13,7 +15,7 @@ export interface VariableItem {
 export type ExpressionSelectableLevels = 'leaf' | 'any'
 
 /** 表达式编辑器组件属性 */
-export interface ExpressionEditorProps extends FormComponentProps {
+export interface ExpressionEditorProps extends FormFieldComponentProps {
   modelValue?: string
   placeholder?: string
   /** 变量列表 */

package/src/types/file-picker.ts

@@ -1,7 +1,9 @@
-import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
+
+import type { FormFieldComponentProps } from './form-field'
 
 /** 文件上传器组件属性 */
-export interface UploaderProps extends FormComponentProps {
+export interface UploaderProps extends FormFieldComponentProps {
   /** 渲染标签 */
   tag?: string
   /** 允许上传的文件类型 */

package/src/types/form-field.ts

@@ -0,0 +1,11 @@
+import type { FormComponentProps } from '@veltra/utils'
+
+import type { ValidateRule } from '../components/form-item/validate'
+
+export type { PresetRule, ValidateRule } from '../components/form-item/validate'
+
+/** 带校验规则的表单控件通用属性 */
+export interface FormFieldComponentProps extends FormComponentProps {
+  /** 校验规则 */
+  rules?: ValidateRule
+}

package/src/types/form-item.ts

@@ -1,7 +1,7 @@
-import type { FormComponentProps } from '@veltra/utils'
+import type { FormFieldComponentProps } from './form-field'
 
 /** 组件项组件属性 */
-export interface FormItemProps extends FormComponentProps {
+export interface FormItemProps extends FormFieldComponentProps {
   /** 标签宽度 */
   labelWidth?: string | number
 }

package/src/types/form.ts

@@ -1,93 +1,16 @@
-import type { ComponentProps, DeconstructValue, ValidateRule } from '@veltra/utils'
+import type { ComponentProps, DeconstructValue } from '@veltra/utils'
 import type { ShallowRef } from 'vue'
 
-import type { NestedFieldMarker } from '../components/form/helper'
-
-export interface FormModelItem<Val = any> extends ValidateRule {
-  /** 模型值 */
-  value?: Val
-}
-
-export type FormModelField = FormModelItem | NestedFieldMarker
-
-// 最终暴露的 ModelData 类型
-export type ModelData<Fields extends Record<string, any>> = {
-  [key in keyof Fields]: Fields[key] extends NestedFieldMarker<infer SubFields>
-    ? ModelData<SubFields>
-    : Fields[key] extends FormModelItem
-      ? Fields[key]['value'] extends () => infer T
-        ? T
-        : Fields[key]['value']
-      : never
-}
-
-// 获取所有的扁平路径 Union（如 'name' | 'contact.email'）
-export type AllKeys<Fields extends Record<string, any>> = {
-  [K in keyof Fields]: K extends string
-    ? Fields[K] extends NestedFieldMarker<infer SubFields>
-      ? `${K}.${AllKeys<SubFields>}`
-      : K
-    : never
-}[keyof Fields]
-
-export type ModelRules<Fields extends Record<string, FormModelItem>> = {
-  [key in keyof Fields]: Omit<Fields[key], 'value'>
-}
-
-export interface DataSettingConfig {
-  /**
-   * 是否校验
-   * @default true
-   */
-  validate?: boolean
-}
-
-export type IFormModel<Fields extends Record<string, any> = Record<string, any>> = {
-  /** 表单数据 */
-  readonly data: ModelData<Fields>
-  /** 字段校验规则 */
-  readonly fields: Fields
-  /**
-   * 字段键
-   */
-  readonly allKeys: string[]
-  /** 需要校验的key */
-  formKeys: Map<number, string[]>
-  /** 错误 */
-  readonly errors: Map<string, string[] | undefined>
-  /**
-   * 字段校验
-   * @param fields 字段， 如果不传入时将会使用keyFields来进行校验
-   */
-  validate: (fields?: string | string[]) => Promise<boolean>
-  /** 重置数据 */
-  resetData(fields?: string | string[]): void
-
-  /**
-   * 设置数据
-   * @param formData 表单值
-   * @param options 配置
-   */
-  setData(formData: Partial<Record<string, any>>, config?: DataSettingConfig): void
-  /** 清除校验 */
-  clearValidate(): void
-  /** 监听值变更 */
-  onChange(cb: (field: string, val: any) => void): void
-  /** 关闭监听值变更 */
-  offChange(cb: (field: string, val: any) => void): void
-}
-
 /** 表单组件属性 */
-export interface FormProps<Model extends IFormModel = IFormModel> extends ComponentProps {
+export interface FormProps extends ComponentProps {
   /**
    * 自定义表单列数
    * - 默认根据尺寸断点自动排列
    */
   cols?: number
-  /** 是否显示初始数据 */
-  showInitialData?: boolean
-  /** 表单数据模型 */
-  model: Model
+  /** 表单数据 */
+  model?: Record<string, any>
+  // showModified?: boolean
   /** 表单项label宽度 */
   labelWidth?: string | number
   /** 是否不显示tips */
@@ -100,6 +23,10 @@ export interface FormProps<Model extends IFormModel = IFormModel> extends Compon
 
 export interface _FormExposed {
   el: ShallowRef<HTMLElement | null | undefined>
+  validate: (keys?: string[]) => Promise<boolean>
+  clearValidate: () => void
+  /** 将 model 恢复为最近一次 props.model 引用变更时的快照，并清除校验 */
+  reset: () => void
 }
 
 export type FormExposed = DeconstructValue<_FormExposed>

package/src/types/group-input.ts

@@ -1,10 +1,12 @@
-import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
 import type { StyleValue } from 'vue'
 
+import type { FormFieldComponentProps } from './form-field'
+
 /** 分组输入组件属性 */
 export interface GroupInputProps<
   GroupItem extends Record<string, any> = Record<string, any>
-> extends FormComponentProps {
+> extends FormFieldComponentProps {
   modelValue?: GroupItem[]
   /** 最大数量 */
   max?: number