@veltra/desktop 1.1.23 → 1.1.25

package/src/components/form/__test__/form-model.test.ts

@@ -0,0 +1,190 @@
+import { describe, expect, it } from 'vitest'
+
+import { DynamicFormModel } from '../dynamic-form-model'
+import { FormModel } from '../form-model'
+import { formField, nestField } from '../helper'
+
+describe('FormModel with Nested Fields', () => {
+  it('should flatten fields and initialize data correctly', () => {
+    const model = new FormModel({
+      name: formField({ value: 'Alice' }),
+      contact: nestField({
+        email: formField({ value: 'alice@example.com' }),
+        phone: formField({ value: '12345678901' })
+      })
+    })
+
+    // Verify allKeys
+    expect(model.allKeys).toEqual(['name', 'contact.email', 'contact.phone'])
+
+    // Verify initialData and data
+    expect(model.data).toEqual({
+      name: 'Alice',
+      contact: { email: 'alice@example.com', phone: '12345678901' }
+    })
+    expect(model.initialData).toEqual({
+      name: 'Alice',
+      contact: { email: 'alice@example.com', phone: '12345678901' }
+    })
+  })
+
+  it('should validate flat and nested fields correctly', async () => {
+    const model = new FormModel({
+      name: formField({ value: '', required: 'Name is required' }),
+      contact: nestField({
+        email: formField({ value: 'invalid-email', preset: 'email' }),
+        phone: formField({ value: '12345678901', required: true })
+      })
+    })
+
+    // Expect initial validation to fail on name and contact.email
+    await expect(model.validate()).rejects.toBe(false)
+    expect(model.errors.get('name')).toEqual(['Name is required'])
+    expect(model.errors.get('contact.email')).toEqual(['邮箱格式不正确'])
+    expect(model.errors.get('contact.phone')).toBeUndefined()
+
+    // Fix name and contact.email, and trigger validation
+    model.data.name = 'Bob'
+    model.data.contact.email = 'bob@example.com'
+
+    // We need to wait for watch effects/nextTick if reactive triggers validation on change
+    // Since validate() is an async function, let's call it directly
+    const valid = await model.validate()
+    expect(valid).toBe(true)
+    expect(model.errors.size).toBe(0)
+  })
+
+  it('should set data and reset data correctly', () => {
+    const model = new FormModel({
+      name: formField({ value: 'Alice' }),
+      contact: nestField({
+        email: formField({ value: 'alice@example.com' }),
+        phone: formField({ value: '12345678901' })
+      })
+    })
+
+    // Update data via setData
+    model.setData({ name: 'Bob', contact: { email: 'bob@example.com', phone: '98765432109' } })
+
+    expect(model.data).toEqual({
+      name: 'Bob',
+      contact: { email: 'bob@example.com', phone: '98765432109' }
+    })
+
+    // Reset data
+    model.resetData()
+    expect(model.data).toEqual({
+      name: 'Alice',
+      contact: { email: 'alice@example.com', phone: '12345678901' }
+    })
+  })
+})
+
+describe('DynamicFormModel with Nested Fields', () => {
+  it('should flatten fields and initialize data correctly', () => {
+    const model = new DynamicFormModel({
+      name: formField({ value: 'Alice' }),
+      contact: nestField({
+        email: formField({ value: 'alice@example.com' }),
+        phone: formField({ value: '12345678901' })
+      })
+    })
+
+    // Verify allKeys
+    expect(model.allKeys).toEqual(['name', 'contact.email', 'contact.phone'])
+
+    // Verify initialData and data
+    expect(model.data).toEqual({
+      name: 'Alice',
+      contact: { email: 'alice@example.com', phone: '12345678901' }
+    })
+    expect(model.initialData).toEqual({
+      name: 'Alice',
+      contact: { email: 'alice@example.com', phone: '12345678901' }
+    })
+  })
+
+  it('should support dynamic add and delete on nested fields', () => {
+    const model = new DynamicFormModel({ name: formField({ value: 'Alice' }) })
+
+    expect(model.allKeys).toEqual(['name'])
+
+    // Dynamically add nested fields
+    model.add(
+      'contact',
+      nestField({
+        email: formField({ value: 'alice@example.com' }),
+        phone: formField({ value: '12345678901' })
+      })
+    )
+
+    expect(model.allKeys).toEqual(['name', 'contact.email', 'contact.phone'])
+    expect(model.data).toEqual({
+      name: 'Alice',
+      contact: { email: 'alice@example.com', phone: '12345678901' }
+    })
+    expect(model.initialData).toEqual({
+      name: 'Alice',
+      contact: { email: 'alice@example.com', phone: '12345678901' }
+    })
+
+    // Dynamically delete nested fields
+    model.delete('contact')
+
+    expect(model.allKeys).toEqual(['name'])
+    expect(model.data.name).toBe('Alice')
+    expect(model.fields.contact).toBeUndefined()
+  })
+
+  it('should validate flat and nested fields correctly', async () => {
+    const model = new DynamicFormModel()
+
+    model.add('name', formField({ value: '', required: 'Name is required' }))
+    model.add(
+      'contact',
+      nestField({
+        email: formField({ value: 'invalid-email', preset: 'email' }),
+        phone: formField({ value: '12345678901', required: true })
+      })
+    )
+
+    // Expect initial validation to fail on name and contact.email
+    await expect(model.validate()).resolves.toBe(false)
+    expect(model.errors.get('name')).toEqual(['Name is required'])
+    expect(model.errors.get('contact.email')).toEqual(['邮箱格式不正确'])
+    expect(model.errors.get('contact.phone')).toBeUndefined()
+
+    // Fix name and contact.email, and trigger validation
+    model.data.name = 'Bob'
+    model.data.contact.email = 'bob@example.com'
+
+    const valid = await model.validate()
+    expect(valid).toBe(true)
+    expect(model.errors.size).toBe(0)
+  })
+
+  it('should set data and reset data correctly for nested fields', () => {
+    const model = new DynamicFormModel({
+      name: formField({ value: 'Alice' }),
+      contact: nestField({
+        email: formField({ value: 'alice@example.com' }),
+        phone: formField({ value: '12345678901' })
+      })
+    })
+
+    // Update data via setData
+    model.setData({ name: 'Bob', contact: { email: 'bob@example.com', phone: '98765432109' } })
+
+    expect(model.data).toEqual({
+      name: 'Bob',
+      contact: { email: 'bob@example.com', phone: '98765432109' }
+    })
+
+    // Reset data
+    model.resetData()
+    expect(model.data).toEqual({
+      name: 'Alice',
+      contact: { email: 'alice@example.com', phone: '12345678901' }
+    })
+  })
+})

package/src/components/form/dynamic-form-model.ts

@@ -2,7 +2,21 @@ import { o } from '@cat-kit/core'
 import { Validator } from '@veltra/utils'
 import { isReactive, reactive, shallowReactive, watch } from 'vue'
 
-import type { FormModelItem, DataSettingConfig } from '../../types'
+import type { FormModelField, FormModelItem, DataSettingConfig } from '../../types'
+
+function flattenFields(fields: Record<string, any>, prefix = ''): Record<string, FormModelItem> {
+  const result: Record<string, FormModelItem> = {}
+  for (const key in fields) {
+    const item = fields[key]
+    const fullPath = prefix ? `${prefix}.${key}` : key
+    if (item && typeof item === 'object' && '__isNested' in item && item.__isNested) {
+      Object.assign(result, flattenFields((item as any).fields, fullPath))
+    } else {
+      result[fullPath] = item
+    }
+  }
+  return result
+}
 
 /**
  * 动态表单模型
@@ -25,10 +39,12 @@ export class DynamicFormModel {
   }
 
   /** 表单规则 */
-  readonly fields: Record<string, FormModelItem> = shallowReactive(
-    {} as Record<string, FormModelItem>
+  readonly fields: Record<string, FormModelField> = shallowReactive(
+    {} as Record<string, FormModelField>
   )
 
+  private flatFields: Record<string, FormModelItem>
+
   private validator: Validator
 
   /**
@@ -52,8 +68,17 @@ export class DynamicFormModel {
     return this._allKeys
   }
 
+  private updateFlatFields(): void {
+    for (const key in this.flatFields) {
+      delete this.flatFields[key]
+    }
+    const flatted = flattenFields(this.fields)
+    Object.assign(this.flatFields, flatted)
+    this.getAllKeys()
+  }
+
   private getAllKeys(): void {
-    this._allKeys = Object.keys(this.fields)
+    this._allKeys = Object.keys(this.flatFields)
   }
 
   /** 初始数据 */
@@ -64,10 +89,10 @@ export class DynamicFormModel {
    */
   private readonly oldData: Record<string, any> = {}
 
-  constructor(fields?: Record<string, FormModelItem>) {
+  constructor(fields?: Record<string, FormModelField>) {
+    this.flatFields = shallowReactive({} as Record<string, FormModelItem>)
+    this.validator = new Validator(this.flatFields)
     this.append(fields ?? {})
-    this.validator = new Validator(this.fields)
-    this.getAllKeys()
     this.watchData()
   }
 
@@ -94,9 +119,9 @@ export class DynamicFormModel {
     })
   }
 
-  append(fields: Record<string, FormModelItem>): void {
+  append(fields: Record<string, FormModelField>): void {
     for (const key in fields) {
-      this.add(key, fields[key] ?? {})
+      this.add(key, fields[key]!)
     }
   }
 
@@ -105,17 +130,20 @@ export class DynamicFormModel {
    * @param field 字段
    * @param item 字段配置项
    */
-  add(field: string, item: FormModelItem): void {
+  add(field: string, item: FormModelField): void {
     this.fields[field] = item
-    const { value } = item
-    const v = typeof value === 'function' ? value() : value
-    /** 这是有bug的 */
-    if (v !== undefined) {
-      this.initialData[field] = JSON.parse(JSON.stringify(v))
+    const flatItem = flattenFields({ [field]: item })
+    for (const key in flatItem) {
+      const fieldItem = flatItem[key]!
+      const { value } = fieldItem
+      const v = typeof value === 'function' ? value() : value
+      if (v !== undefined) {
+        o(this.initialData).set(key, JSON.parse(JSON.stringify(v)))
+      }
+      o(this.data).set(key, v)
+      o(this.oldData).set(key, v)
     }
-    o(this.data).set(field, v)
-    o(this.oldData).set(field, v)
-    this.getAllKeys()
+    this.updateFlatFields()
   }
 
   /**
@@ -124,7 +152,7 @@ export class DynamicFormModel {
    */
   delete(field: string): void {
     delete this.fields[field]
-    this.getAllKeys()
+    this.updateFlatFields()
   }
 
   /**

package/src/components/form/form-model.ts

@@ -2,19 +2,30 @@ import { o } from '@cat-kit/core'
 import { middleProxy, Validator } from '@veltra/utils'
 import { nextTick, reactive, shallowReactive, watch, type Reactive } from 'vue'
 
-import type {
-  FormModelItem,
-  ModelData,
-  ModelRules,
-  DataSettingConfig,
-  IFormModel
-} from '../../types'
+import type { ModelData, DataSettingConfig, IFormModel, AllKeys, FormModelItem } from '../../types'
+
+/**
+ * 递归展平字段逻辑
+ */
+function flattenFields(fields: Record<string, any>, prefix = ''): Record<string, FormModelItem> {
+  const result: Record<string, FormModelItem> = {}
+  for (const key in fields) {
+    const item = fields[key]
+    const fullPath = prefix ? `${prefix}.${key}` : key
+    if (item && typeof item === 'object' && '__isNested' in item && item.__isNested) {
+      Object.assign(result, flattenFields((item as any).fields, fullPath))
+    } else {
+      result[fullPath] = item
+    }
+  }
+  return result
+}
 
 /**
  * 表单模型
  */
 export class FormModel<
-  Fields extends Record<string, FormModelItem> = Record<string, FormModelItem>
+  Fields extends Record<string, any> = Record<string, any>
 > implements IFormModel<Fields> {
   /** 表单数据 */
   data!: ModelData<Fields>
@@ -30,14 +41,14 @@ export class FormModel<
    * @description
    * 这个值会在表单组件渲染时由表单设置，因为只有真正渲染的组件才应该被校验
    */
-  formKeys: Map<number, (keyof Fields)[]> = new Map()
+  formKeys: Map<number, AllKeys<Fields>[]> = new Map()
 
   /** 初始数据 */
   readonly initialData: ModelData<Fields>
 
-  readonly errors: Map<keyof Fields, string[] | undefined> = shallowReactive(new Map())
+  readonly errors: Map<AllKeys<Fields>, string[] | undefined> = shallowReactive(new Map())
 
-  private validator: Validator<ModelRules<Fields>>
+  private validator: Validator<Record<string, FormModelItem>>
 
   /**
    * 是否在表单值更新时校验
@@ -48,11 +59,12 @@ export class FormModel<
 
   constructor(fields: Fields) {
     this.fields = fields
+    const flatFields = flattenFields(fields)
     const rawData = {} as ModelData<Fields>
     const allKeys: string[] = []
 
-    for (const key in fields) {
-      const fieldItem = fields[key]!
+    for (const key in flatFields) {
+      const fieldItem = flatFields[key]!
       allKeys.push(key)
       const { value } = fieldItem
       let v = value
@@ -72,7 +84,7 @@ export class FormModel<
 
     this.setProxyData(reactive(rawData))
 
-    this.validator = new Validator(this.fields)
+    this.validator = new Validator(flatFields)
 
     return shallowReactive(this)
   }
@@ -93,23 +105,23 @@ export class FormModel<
           this.validateOnFieldChange = true
           return
         }
-        this.validate(fields)
+        this.validate(fields as any)
       }
     })
 
     this.data = data as ModelData<Fields>
   }
 
-  private getValidateFields(fields?: keyof Fields | (keyof Fields)[]) {
+  private getValidateFields(fields?: AllKeys<Fields> | AllKeys<Fields>[]) {
     if (!fields) {
       if (this.formKeys.size) {
-        let _fields: (keyof Fields)[] = []
+        let _fields: AllKeys<Fields>[] = []
         this.formKeys.forEach((fields) => {
           _fields = _fields.concat(fields)
         })
         return _fields
       } else {
-        return this.allKeys
+        return this.allKeys as AllKeys<Fields>[]
       }
     }
 
@@ -124,23 +136,23 @@ export class FormModel<
    * @param fields 需要校验的字段, 不传则校验所有字段
    * @returns
    */
-  async validate(fields?: keyof Fields | (keyof Fields)[]): Promise<boolean> {
+  async validate(fields?: AllKeys<Fields> | AllKeys<Fields>[]): Promise<boolean> {
     const { errors, validator, data } = this
 
-    const results = await validator.validate(data, this.getValidateFields(fields))
+    const results = await validator.validate(data, this.getValidateFields(fields) as any)
 
     // 全量校验
     if (!fields) {
       errors.clear()
 
       for (const field in results) {
-        errors.set(field, results[field])
+        errors.set(field as any, results[field])
       }
     }
     // 局部校验
     else {
       ~(Array.isArray(fields) ? fields : [fields]).forEach((field) => {
-        const errs = results[field]
+        const errs = results[field as string]
         if (errs?.length) {
           errors.set(field, errs)
         } else {
@@ -165,12 +177,12 @@ export class FormModel<
    * 重置数据
    * @param fields 需要重置的字段
    */
-  resetData(keys?: keyof Fields | (keyof Fields)[]): void {
+  resetData(keys?: AllKeys<Fields> | AllKeys<Fields>[]): void {
     if (typeof keys === 'string') {
       keys = [keys]
     } else if (Array.isArray(keys)) {
     } else {
-      keys = this.allKeys
+      keys = this.allKeys as AllKeys<Fields>[]
     }
 
     this.clearValidate()
@@ -229,12 +241,12 @@ export class FormModel<
    * 监听值变更
    * @param cb 回调
    */
-  onChange(cb: (field: keyof Fields, val: any) => void): void {
-    this.modelChangeCallback.add(cb)
+  onChange(cb: (field: AllKeys<Fields>, val: any) => void): void {
+    this.modelChangeCallback.add(cb as any)
   }
 
   /** 关闭监听值变更 */
-  offChange(cb: (field: keyof Fields, val: any) => void): void {
-    this.modelChangeCallback.delete(cb)
+  offChange(cb: (field: AllKeys<Fields>, val: any) => void): void {
+    this.modelChangeCallback.delete(cb as any)
   }
 }

package/src/components/form/helper.ts

@@ -12,3 +12,12 @@ export function formField<Val = unknown>(item?: FormModelItem<Val>): FormModelIt
 
   return item
 }
+
+export interface NestedFieldMarker<T extends Record<string, any> = Record<string, any>> {
+  __isNested: true
+  fields: T
+}
+
+export function nestField<T extends Record<string, any>>(fields: T): NestedFieldMarker<T> {
+  return { __isNested: true, fields }
+}

package/src/components/form/index.ts

@@ -1,6 +1,7 @@
 export { default as UForm } from './form.vue'
 
-export * from './helper'
+export { formField, nestField } from './helper'
+export type { NestedFieldMarker } from './helper'
 
 export { FormModel } from './form-model'
 export { DynamicFormModel } from './dynamic-form-model'

package/src/types/form.ts

@@ -1,15 +1,35 @@
 import type { ComponentProps, DeconstructValue, ValidateRule } 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 ModelData<Fields extends Record<string, FormModelItem>> = {
-  [key in keyof Fields]: Fields[key]['value'] extends () => infer T ? T : Fields[key]['value']
+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'>
 }
@@ -22,9 +42,7 @@ export interface DataSettingConfig {
   validate?: boolean
 }
 
-export type IFormModel<
-  Fields extends Record<string, FormModelItem> = Record<string, FormModelItem>
-> = {
+export type IFormModel<Fields extends Record<string, any> = Record<string, any>> = {
   /** 表单数据 */
   readonly data: ModelData<Fields>
   /** 字段校验规则 */
@@ -34,16 +52,16 @@ export type IFormModel<
    */
   readonly allKeys: string[]
   /** 需要校验的key */
-  formKeys: Map<number, (keyof Fields)[]>
+  formKeys: Map<number, AllKeys<Fields>[]>
   /** 错误 */
-  readonly errors: Map<keyof Fields, string[] | undefined>
+  readonly errors: Map<AllKeys<Fields>, string[] | undefined>
   /**
    * 字段校验
    * @param fields 字段， 如果不传入时将会使用keyFields来进行校验
    */
-  validate: (fields?: keyof Fields | (keyof Fields)[]) => Promise<boolean>
+  validate: (fields?: AllKeys<Fields> | AllKeys<Fields>[]) => Promise<boolean>
   /** 重置数据 */
-  resetData(fields?: keyof Fields | (keyof Fields)[]): void
+  resetData(fields?: AllKeys<Fields> | AllKeys<Fields>[]): void
 
   /**
    * 设置数据
@@ -54,9 +72,9 @@ export type IFormModel<
   /** 清除校验 */
   clearValidate(): void
   /** 监听值变更 */
-  onChange(cb: (field: keyof Fields, val: any) => void): void
+  onChange(cb: (field: AllKeys<Fields>, val: any) => void): void
   /** 关闭监听值变更 */
-  offChange(cb: (field: keyof Fields, val: any) => void): void
+  offChange(cb: (field: AllKeys<Fields>, val: any) => void): void
 }
 
 /** 表单组件属性 */