@dazhicheng/ui 1.5.34 → 1.5.36

package/dist/components/tt-form/src/group-form/types.d.ts

@@ -0,0 +1,147 @@
+import { ExtendedFormApi, FormActions, FormCommonConfig, FormLayout, FormSchema, FormSlotSchema, TtFormProps, WrapperClassType } from '../types';
+import { Ref } from 'vue';
+export type CollapsibleType = boolean | ((values: Record<string, any>, actions: FormActions) => boolean | PromiseLike<boolean>);
+/** 控制 group / row / slot 是否显示，支持布尔值或函数（接收表单值与 formActions，可返回 Promise） */
+export type IfShowConditionType = boolean | ((values: Record<string, any>, actions: FormActions) => boolean | PromiseLike<boolean>);
+/** 分组表单项 */
+export interface FormGroupSchema {
+    /** 类型 */
+    type: "group";
+    /** 分组唯一标识 */
+    key: string;
+    /** 分组标题 */
+    title: string;
+    /** 是否可折叠，支持布尔值或函数 (values, actions) => boolean | Promise<boolean> */
+    collapsible?: CollapsibleType;
+    /** 初始是否折叠 */
+    defaultCollapsed?: boolean;
+    /** 子项（字段或嵌套分组） */
+    children: GroupFormSchema[];
+    /** 组内字段栅格布局 */
+    wrapperClass?: WrapperClassType;
+    /** 组内字段通用配置（覆盖外层 commonConfig） */
+    commonConfig?: FormCommonConfig;
+    /** 是否显示，支持布尔值或函数 (values, actions) => boolean | Promise<boolean>，默认 true */
+    ifShow?: IfShowConditionType;
+}
+/**
+ * 纯布局行容器，不产生分组标题，仅将若干字段包裹在一行内并支持自定义样式
+ * @property {"row"} type - 固定为 "row"
+ * @property {FormSchema[]} children - 行内字段列表
+ * @property {WrapperClassType} [wrapperClass] - 行容器额外 class（如 grid-cols-3、bg-xxx 等）
+ */
+export interface FormRowSchema {
+    /** 类型标识 */
+    type: "row";
+    /** 行内字段列表 */
+    children: FormSchema[];
+    /** 行容器额外 class，可用于设置列数、背景、圆角等 */
+    wrapperClass?: WrapperClassType;
+    /** 是否显示，支持布尔值或函数 (values, actions) => boolean | Promise<boolean>，默认 true */
+    ifShow?: IfShowConditionType;
+}
+export type GroupFormSchema = FormGroupSchema | FormRowSchema | FormSlotSchema | FormSchema;
+/** 分组表单组件选项 */
+export interface UseGroupFormOptions extends Omit<TtFormProps, "schema" | "showDefaultActions"> {
+    schema: GroupFormSchema[];
+    /** 是否启用表单项级别的虚拟化（IntersectionObserver 懒渲染），默认 true */
+    virtual?: boolean;
+    /** 滚动容器高度，默认 '100%' */
+    containerHeight?: number | string;
+    /** IntersectionObserver rootMargin，控制提前渲染的距离，默认 '200px 0px'（仅 virtual 为 true 时生效） */
+    rootMargin?: string;
+    /** 预估每个表单项高度（px），用于占位，默认 52（仅 virtual 为 true 时生效） */
+    estimateFieldHeight?: number;
+    /** 是否显示悬浮导航锚点，默认 true */
+    showNav?: boolean;
+    /** 导航栏标题，默认 '导航' */
+    navTitle?: string;
+    /** 自动滚动到指定分组，默认 'top' */
+    autoScrollToGroup?: AutoScrollPosition;
+    /** 校验失败时是否自动滚动到第一个有错误的分组，默认 true */
+    scrollToFirstError?: boolean;
+}
+/** LazyFormField 组件 props */
+export interface LazyFormFieldProps {
+    /** 传给 FormField 的完整 props（通过 v-bind 透传） */
+    fieldProps: Record<string, unknown>;
+    /** FormSchema.rules */
+    rules?: FormSchema["rules"];
+    /** FormSchema.formItemClass（用于外层 class） */
+    fieldClass?: string;
+    /** 滚动容器选择器或元素引用，默认取最近的 overflow:auto 祖先 */
+    root?: Element | null;
+    /** IntersectionObserver rootMargin，控制提前渲染的距离 */
+    rootMargin?: string;
+    /** 预估占位高度（px），首次渲染前使用 */
+    estimateHeight?: number;
+    /** 未进入视口时是否显示骨架屏（弹框首屏等场景减少白屏感），默认 true */
+    skeleton?: boolean;
+    /** 骨架屏是否开启动画，默认 true */
+    skeletonAnimated?: boolean;
+}
+/** 分组表单组件 props */
+export interface GroupFormSectionProps {
+    /** 分组表单定义（可选，优先从 store 读取） */
+    groupSchema?: GroupFormSchema[];
+    /** 表单 API */
+    formApi: ExtendedFormApi;
+    /** 分组折叠状态 */
+    collapseStates: Record<string, boolean>;
+    /** 滚动容器高度 */
+    containerHeight?: number | string;
+    /** 通用配置 */
+    commonConfig?: FormCommonConfig;
+    /** 布局 */
+    layout?: FormLayout;
+    /** 紧凑模式 */
+    compact?: boolean;
+    /** IntersectionObserver rootMargin，控制提前渲染距离 */
+    rootMargin?: string;
+    /** 预估每个表单项高度（px） */
+    estimateFieldHeight?: number;
+    /** 是否启用表单项级别的虚拟化，默认 true */
+    virtual?: boolean;
+    /** 共享的字段错误缓存，由 useGroupForm 创建 */
+    errorCacheMap?: Map<string, string>;
+    /** 重置信号，由 useGroupForm 创建 */
+    resetSignal?: Ref<number>;
+    /** 是否显示悬浮导航 */
+    showNav?: boolean;
+    /** 导航标题 */
+    navTitle?: string;
+    /** 导航各分组错误数量 */
+    navErrorCounts?: Record<string, number>;
+    /** 自动滚动到指定分组 */
+    autoScrollToGroup?: AutoScrollPosition;
+    /** 校验失败时是否自动滚动到第一个有错误的分组，默认 true */
+    scrollToFirstError?: boolean;
+    /** 切换分组折叠状态 */
+    toggleCollapse?: (key: string) => void;
+}
+/** GroupSection 递归组件 props */
+export interface GroupSectionProps {
+    /** 当前节点的 schema（分组 / 行容器 / 字段） */
+    schema: GroupFormSchema;
+    /** 分组折叠状态 */
+    collapseStates: Record<string, boolean>;
+    /** 当前层级合并后的通用配置 */
+    commonConfig?: FormCommonConfig;
+    /** 全局通用配置（最外层传入，逐层透传） */
+    globalCommonConfig?: FormCommonConfig;
+    /** 表单布局方向 */
+    layout?: string;
+    /** 紧凑模式 */
+    compact?: boolean;
+    /** 当前嵌套深度，顶层为 0，递归时自增 */
+    depth?: number;
+    /** 是否启用表单项级别的虚拟化（IntersectionObserver 懒渲染） */
+    virtual?: boolean;
+    /** 虚拟化时滚动容器引用 */
+    scrollElement?: Element | null;
+    /** 虚拟化时 IntersectionObserver rootMargin */
+    virtualRootMargin?: string;
+    /** 虚拟化时预估表单项高度（px） */
+    virtualEstimateHeight?: number;
+}
+export type AutoScrollPosition = "top" | "bottom";

package/dist/components/tt-form/src/group-form/useGroupForm.d.ts

@@ -0,0 +1,5 @@
+import { ExtendedFormApi } from '../types';
+import { UseGroupFormOptions } from './types';
+export declare function useGroupForm(options: UseGroupFormOptions): readonly [import('vue').DefineComponent<{}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, ExtendedFormApi, Record<string, boolean>];

package/dist/components/tt-form/src/group-form/utils.d.ts

@@ -0,0 +1,93 @@
+import { FormGroupSchema, FormRowSchema, GroupFormSchema } from './types';
+import { FormSchema, FormSlotSchema } from '../types';
+/**
+ * 判断当前节点是否为分组 schema（含 type: 'group' 与 children）
+ * @param {GroupFormSchema} schema - 分组表单 schema 节点（分组或字段）
+ * @returns {boolean} 若为分组则 true，且类型收窄为 FormGroupSchema
+ * @example
+ * if (isGroupSchema(item)) item.children; // 可安全访问 children
+ */
+export declare function isGroupSchema(schema: GroupFormSchema): schema is FormGroupSchema;
+/**
+ * 判断当前节点是否为纯布局行容器（type: 'row'）
+ * @param {GroupFormSchema} schema - 分组表单 schema 节点
+ * @returns {boolean} 若为行容器则 true，且类型收窄为 FormRowSchema
+ * @example
+ * if (isRowSchema(item)) item.children; // 可安全访问 children（均为字段）
+ */
+export declare function isRowSchema(schema: GroupFormSchema): schema is FormRowSchema;
+/**
+ * 判断当前节点是否为自定义插槽（type: 'slot'）
+ * @param {GroupFormSchema} schema - 分组表单 schema 节点
+ * @returns {boolean} 若为插槽则 true，且类型收窄为 FormSlotSchema
+ * @example
+ * if (isSlotSchema(item)) console.log(item.content);
+ */
+export declare function isSlotSchema(schema: GroupFormSchema): schema is FormSlotSchema;
+/**
+ * 递归展平分组 schema，提取所有字段 schema（忽略分组结构）
+ * @param {GroupFormSchema[]} schemas - 分组 schema 数组，可包含分组与字段的混合结构
+ * @returns {FormSchema[]} 展平后的字段 schema 数组，不包含分组节点
+ * @example
+ * const flat = extractFlatSchemas([
+ *   { type: 'group', key: 'basic', children: [{ fieldName: 'name' }] },
+ *   { fieldName: 'age' }
+ * ]);
+ * // 返回: [{ fieldName: 'name' }, { fieldName: 'age' }]
+ */
+export declare function extractFlatSchemas(schemas: GroupFormSchema[]): FormSchema[];
+/**
+ * 递归收集分组 schema 中 defaultCollapsed 为 true 的分组 key，写入 states
+ * @param {GroupFormSchema[]} schemas - 分组表单 schema 数组
+ * @param {Record<string, boolean>} states - 折叠状态对象，按分组 key 写入 true 表示初始折叠
+ * @example
+ * const states = {}; collectDefaultCollapseStates(groupSchema, states);
+ */
+export declare function collectDefaultCollapseStates(schemas: any[], states: Record<string, boolean>): void;
+/**
+ * 插入位置描述
+ * @property {string} [before] - 在匹配节点之前插入（匹配 fieldName / slot content / group key）
+ * @property {string} [after] - 在匹配节点之后插入（匹配规则同 before）
+ */
+export interface InsertPosition {
+    before?: string;
+    after?: string;
+}
+/**
+ * 在 groupSchema 树中查找指定 groupKey 的分组，并在其 children 中插入新字段。
+ * 当 before/after 匹配到 row 内部的字段时，会直接在 row 的 children 中插入
+ * @param {GroupFormSchema[]} schemas - 分组 schema 树（会被原地修改）
+ * @param {string} groupKey - 目标分组的 key
+ * @param {GroupFormSchema[]} fields - 要插入的字段
+ * @param {InsertPosition} [position] - 插入位置；省略则追加到末尾
+ * @returns {boolean} 是否找到目标分组并完成插入
+ * @example
+ * // 在 fieldName 为 'phone' 的字段之前插入
+ * insertFieldsInGroup(schema, 'contact', [newField], { before: 'phone' });
+ * @example
+ * // 在 row 内部的 'v_age' 字段之后插入
+ * insertFieldsInGroup(schema, 'basic', [newField], { after: 'v_age' });
+ */
+export declare function insertFieldsInGroup(schemas: GroupFormSchema[], groupKey: string, fields: GroupFormSchema[], position?: InsertPosition): boolean;
+/**
+ * 从 groupSchema 树中递归移除指定 fieldName 或 slot content 的节点
+ * @param {GroupFormSchema[]} schemas - 分组 schema 树（会被原地修改）
+ * @param {Set<string>} fieldNames - 要移除的标识集合（fieldName 或 slot content 字符串）
+ * @returns {GroupFormSchema[]} 过滤后的 schema 数组
+ * @example
+ * removeFieldsFromGroup(schema, new Set(['phone_0', 'divider-contact-0']));
+ */
+export declare function removeFieldsFromGroup(schemas: GroupFormSchema[], fieldNames: Set<string>): GroupFormSchema[];
+/**
+ * 浅拷贝 groupSchema 树结构（只复制数组和分组/行的 children 引用，不深拷贝叶子节点）
+ * @param {GroupFormSchema[]} schemas - 原始 schema 树
+ * @returns {GroupFormSchema[]} 拷贝后的新树，可安全做 splice 等原地修改而不影响原树
+ */
+export declare function cloneSchemaTree(schemas: GroupFormSchema[]): GroupFormSchema[];
+/**
+ * 获取分组 schema 的值
+ * @param {GroupFormSchema[]} groupSchema - 分组 schema 数组（可含 group / row / slot / 字段）
+ * @param {Record<string, any>} values - 表单值
+ * @returns {Record<string, any>} 分组值
+ */
+export declare function getGroupValues(groupSchema: GroupFormSchema[], values: Record<string, any>): Record<string, any>;

package/dist/components/tt-form/src/types.d.ts

@@ -1,6 +1,6 @@
-import { ButtonProps, CheckboxProps, CheckboxGroupProps, DatePickerProps, InputProps, InputNumberProps, RadioProps, RadioGroupProps, SelectProps, SelectV2Props, SwitchProps, TimePickerDefaultProps, UploadProps, CascaderProps } from 'element-plus';
+import { ButtonProps, CheckboxProps, CheckboxGroupProps, DatePickerProps, InputProps, InputNumberProps, RadioProps, RadioGroupProps, SelectProps, SelectV2Props, SwitchProps, TimePickerDefaultProps, UploadProps, CascaderProps, ColorPickerProps } from 'element-plus';
 import { FieldOptions, FormContext, GenericObject } from 'vee-validate';
-import { Component, HtmlHTMLAttributes, MaybeRefOrGetter, Ref } from 'vue';
+import { Component, HtmlHTMLAttributes, MaybeRefOrGetter, Ref, VNode } from 'vue';
 import { ZodTypeAny } from 'zod';
 import { TtTextProps } from '../../tt-text';
 import { TtSelectProp } from '../../tt-select';
@@ -25,6 +25,7 @@ export interface BaseFormComponentMap {
     ElUpload: UploadProps;
     ElCascader: CascaderProps;
     TtUpload: TtUploadProps;
+    ElColorPicker: ColorPickerProps;
 }
 /**
  * 表单组件类型字符串联合类型
@@ -214,6 +215,34 @@ export interface FormSchema<T extends BaseFormComponentType = BaseFormComponentT
     /** 非label文字气泡设置 */
     toolTipText?: CustomRenderType;
 }
+/** 插槽 scope 参数，传递给渲染函数或具名插槽 */
+export interface FormSlotScope {
+    /** 当前表单所有字段的值 */
+    values: Record<string, any>;
+    /** 表单操作方法（validate / resetForm / getValues 等） */
+    formActions: FormActions;
+}
+/**
+ * 自定义插槽 schema，在表单字段之间插入任意自定义内容。
+ * content 为字符串时作为具名插槽名，在模板中用 `<template #slotName="{ values, formActions }">` 编写；
+ * content 为函数时直接返回 VNode。
+ * @property {"slot"} type - 固定为 "slot"
+ * @property {string | ((scope: FormSlotScope) => VNode)} content - 插槽名或渲染函数
+ * @property {WrapperClassType} [wrapperClass] - 容器额外 class（如 col-span-full）
+ */
+export interface FormSlotSchema {
+    /** 类型标识 */
+    type: "slot";
+    /** 插槽名（字符串）或渲染函数 */
+    content: string | ((scope: FormSlotScope) => VNode);
+    /** 容器额外 class */
+    wrapperClass?: WrapperClassType;
+    /**
+     * 是否显示，支持布尔值或函数 (values, actions) => boolean | Promise<boolean>，默认 true。
+     * 仅在 GroupForm 场景下生效。
+     */
+    ifShow?: boolean | ((values: Record<string, any>, actions: FormActions) => boolean | PromiseLike<boolean>);
+}
 export interface FormFieldProps extends FormSchema {
     required?: boolean;
 }
@@ -266,9 +295,9 @@ export interface FormRenderProps<T extends BaseFormComponentType = BaseFormCompo
      */
     layout?: FormLayout;
     /**
-     * 表单定义
+     * 表单定义，支持普通字段和自定义插槽混合
      */
-    schema?: FormSchema<T>[];
+    schema?: (FormSchema<T> | FormSlotSchema)[];
     /**
      * 是否显示展开/折叠
      */
@@ -359,8 +388,46 @@ export interface TtFormProps<T extends BaseFormComponentType = BaseFormComponent
      */
     submitOnEnter?: boolean;
 }
-export type ExtendedFormApi = FormApi & {
+export type ExtendedFormApi = Omit<FormApi, "getValues" | "validate"> & {
+    /**
+     * 校验表单，支持通过第二个参数控制是否滚动到第一个错误分组
+     * @param {any} [opts] - 原始 validate 选项
+     * @param {boolean} [scrollToError] - 是否滚动到第一个错误分组，不传时使用全局配置 scrollToFirstError
+     */
+    validate: (opts?: any, scrollToError?: boolean) => Promise<{
+        valid: boolean;
+        errors: Record<string, string>;
+        results?: any;
+    }>;
+    /**
+     * 获取表单值
+     * @param {boolean} [isGroup] - 为 true 时返回按分组 key 嵌套的对象，默认 false 返回扁平值
+     * @returns {Promise<T>} 表单值
+     */
+    getValues: <T = Record<string, any>>(isGroup?: boolean) => Promise<T>;
     useStore: <T = NoInfer<TtFormProps>>(selector?: (state: NoInfer<TtFormProps>) => T) => Readonly<Ref<T>>;
+    /** 滚动到指定分组（仅 useGroupForm 场景下可用） */
+    scrollToGroup?: (key: string) => void;
+    /**
+     * 动态更新分组 schema（同时更新 UI 渲染和底层字段注册），仅 useGroupForm 场景下可用
+     * @param {any[]} newSchema - 新的分组 schema（实际类型为 GroupFormSchema[]，此处用 any[] 避免循环依赖）
+     */
+    updateGroupSchema?: (newSchema: any[]) => void;
+    /**
+     * 在指定分组中增量插入字段，无需全量重建 schema
+     * @param {string} groupKey - 目标分组的 key
+     * @param {any[]} fields - 要插入的字段或子结构（实际类型为 GroupFormSchema[]）
+     * @param {InsertPosition} [position] - 插入位置：before/after 匹配 fieldName、slot content 或 group key；省略则追加到末尾
+     */
+    appendFields?: (groupKey: string, fields: any[], position?: {
+        before?: string;
+        after?: string;
+    }) => void;
+    /**
+     * 按字段名从 groupSchema 树中移除字段，无需全量重建 schema
+     * @param {string[]} fieldNames - 要移除的字段名列表
+     */
+    removeFields?: (fieldNames: string[]) => void;
 };
 export interface TtFormAdapterOptions<T extends BaseFormComponentType = BaseFormComponentType> {
     config?: {

package/dist/components/tt-icon/components/AddIcon.vue.d.ts

@@ -0,0 +1,7 @@
+import { TtIconProps } from '../index';
+type __VLS_Props = Omit<TtIconProps, "icon">;
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: number;
+    isCustomSvg: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/tt-icon/components/SubIcon.vue.d.ts

@@ -0,0 +1,7 @@
+import { TtIconProps } from '../index';
+type __VLS_Props = Omit<TtIconProps, "icon">;
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: number;
+    isCustomSvg: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/tt-icon/index.d.ts

@@ -48,6 +48,54 @@ export declare const TtIcon: import('../../../../utils/src').SFCWithInstall<{
         prefix?: () => any;
     };
 })> & Record<string, any>;
+export declare const TtAddIcon: import('../../../../utils/src').SFCWithInstall<import('vue').DefineComponent<{
+    title?: string | undefined;
+    disabled?: boolean | undefined;
+    size?: number | undefined;
+    class?: HTMLAttributes["class"];
+    isSymbol?: boolean | undefined;
+    isCustomSvg?: boolean | undefined;
+    iconFont?: string | undefined;
+    isImg?: boolean | undefined;
+    color?: string | undefined;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    title?: string | undefined;
+    disabled?: boolean | undefined;
+    size?: number | undefined;
+    class?: HTMLAttributes["class"];
+    isSymbol?: boolean | undefined;
+    isCustomSvg?: boolean | undefined;
+    iconFont?: string | undefined;
+    isImg?: boolean | undefined;
+    color?: string | undefined;
+}> & Readonly<{}>, {
+    size: number;
+    isCustomSvg: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>> & Record<string, any>;
+export declare const TtSubIcon: import('../../../../utils/src').SFCWithInstall<import('vue').DefineComponent<{
+    title?: string | undefined;
+    disabled?: boolean | undefined;
+    size?: number | undefined;
+    class?: HTMLAttributes["class"];
+    isSymbol?: boolean | undefined;
+    isCustomSvg?: boolean | undefined;
+    iconFont?: string | undefined;
+    isImg?: boolean | undefined;
+    color?: string | undefined;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    title?: string | undefined;
+    disabled?: boolean | undefined;
+    size?: number | undefined;
+    class?: HTMLAttributes["class"];
+    isSymbol?: boolean | undefined;
+    isCustomSvg?: boolean | undefined;
+    iconFont?: string | undefined;
+    isImg?: boolean | undefined;
+    color?: string | undefined;
+}> & Readonly<{}>, {
+    size: number;
+    isCustomSvg: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>> & Record<string, any>;
 export default TtIcon;
 export * from './index.vue';
 export type TtIconProps = {