zy-react-library 1.2.3 → 1.2.4

package/components/DragTableBuilder/DragTableBuilder.js

@@ -0,0 +1 @@
+import{useState as e,useCallback as t}from"react";import{message as i,Modal as l,Space as n,Button as o,Row as d,Col as r}from"antd";import{CopyOutlined as a,ExportOutlined as s,Html5Outlined as c,ClearOutlined as p}from"@ant-design/icons";import{DndContext as b}from"../../node_modules/@dnd-kit/core/dist/core.esm";import{arrayMove as h}from"../../node_modules/@dnd-kit/sortable/dist/sortable.esm";import m from"./FieldLibrary.js";import f from"./DropZone.js";import g from"./FieldConfigEditor.js";import u from"./TablePreview.js";import"../../src/components/DragTableBuilder/DragTableBuilder.less";import{jsxs as x,jsx as y}from"react/jsx-runtime";const w=[{type:"text",label:"文本",icon:"T"},{type:"number",label:"数字",icon:"#"},{type:"date",label:"日期",icon:"📅"},{type:"datetime",label:"日期时间",icon:"🕐"},{type:"select",label:"下拉选择",icon:"▼"},{type:"boolean",label:"布尔值",icon:"☑"},{type:"email",label:"邮箱",icon:"✉"},{type:"url",label:"链接",icon:"🔗"},{type:"image",label:"图片",icon:"🖼"},{type:"tag",label:"标签",icon:"🏷"},{type:"progress",label:"进度条",icon:"▓"},{type:"rate",label:"评分",icon:"★"}],v=v=>{const{fieldTypes:k=w,initialFields:C=[],onChange:T,onExport:L,showPreview:$=!0,showLibrary:E=!0,showConfigEditor:j=!0}=v,[I,D]=e(C),[M,R]=e(null),[_,F]=e(!1),H=t(()=>`field_${Date.now()}_${Math.random().toString(36).substr(2,9)}`,[]),O=t(e=>{const{active:t,over:i}=e;if(i&&t.id!==i.id){const e=I.findIndex(e=>e.id===t.id),l=I.findIndex(e=>e.id===i.id),n=h(I,e,l);D(n),T&&T(n)}},[I,T]),U=t(e=>{const t=I.filter(t=>t.id!==e);D(t),T&&T(t)},[I,T]),B=t(e=>{R(e),F(!0)},[]),N=t(e=>{const t=I.map(t=>t.id===e.id?e:t);D(t),F(!1),R(null),T&&T(t),i.success("字段配置已保存")},[I,T]),S=t(()=>{F(!1),R(null)},[]),P=t(()=>{l.confirm({title:"确认清空",content:"确定要清空所有字段吗？",onOk:()=>{D([]),T&&T([]),i.success("已清空所有字段")}})},[T]),z=t(()=>{const e=I.map(e=>({title:e.title,dataIndex:e.dataIndex,width:e.width,align:e.align,fixed:e.fixed,ellipsis:e.ellipsis,sorter:!1!==e.sortable})),t=JSON.stringify(e,null,2);navigator.clipboard.writeText(t).then(()=>{i.success("配置已复制到剪贴板")}).catch(()=>{i.error("复制失败")})},[I]),J=t(()=>{const e=I.map(e=>({title:e.title,dataIndex:e.dataIndex,width:e.width,align:e.align,fixed:e.fixed,ellipsis:e.ellipsis,sorter:!1!==e.sortable}));L?L(e):(console.log("导出的表格配置:",e),i.success("配置已导出到控制台"))},[I,L]),Z=t(()=>{let e=`<table style="width: ${I.reduce((e,t)=>e+(t.width||150),0)}px; border-collapse: collapse; font-size: 13px;">\n`;return e+="  <thead>\n",e+="    <tr>\n",I.forEach(t=>{const i=t.align||"center";e+=`      <th style="width: ${t.width||150}px; text-align: ${i}; padding: 8px 12px; border: 1px solid #f0f0f0; background: #fafafa; font-weight: 600;">${t.title||t.label}</th>\n`}),e+="    </tr>\n",e+="  </thead>\n",e+="  <tbody>\n",e+="    <tr>\n",I.forEach(t=>{const i=t.align||"center";e+=`      <td style="width: ${t.width||150}px; text-align: ${i}; padding: 8px 12px; border: 1px solid #f0f0f0;">数据示例</td>\n`}),e+="    </tr>\n",e+="  </tbody>\n",e+="</table>",e},[I]),q=t(()=>{const e=Z();navigator.clipboard.writeText(e).then(()=>{i.success("HTML代码已复制到剪贴板")}).catch(()=>{i.error("复制失败")})},[Z]),A=t(()=>{const e=Z(),t=new Blob([e],{type:"text/html"}),l=URL.createObjectURL(t),n=document.createElement("a");n.href=l,n.download="table.html",document.body.appendChild(n),n.click(),document.body.removeChild(n),URL.revokeObjectURL(l),i.success("HTML文件已导出")},[Z]),G=t(e=>{const t={id:H(),type:e.type,label:e.label,title:e.label,dataIndex:`field_${I.length+1}`,width:150,align:"center",ellipsis:!0,sortable:!0},l=[...I,t];D(l),T&&T(l),i.success(`已添加${e.label}字段`)},[I,H,T]);return x("div",{className:"drag-table-builder",children:[y("div",{className:"builder-header",children:x(n,{wrap:!0,children:[y(o,{icon:y(a,{}),onClick:z,disabled:0===I.length,children:"复制配置"}),y(o,{icon:y(s,{}),onClick:J,disabled:0===I.length,children:"导出配置"}),y(o,{icon:y(c,{}),onClick:q,disabled:0===I.length,children:"复制HTML"}),y(o,{icon:y(c,{}),onClick:A,disabled:0===I.length,children:"导出HTML"}),y(o,{icon:y(p,{}),onClick:P,disabled:0===I.length,danger:!0,children:"清空"})]})}),y(b,{onDragEnd:O,children:x(d,{gutter:16,children:[E&&y(r,{span:6,children:y(m,{fields:k,onFieldClick:G})}),x(r,{span:E?18:24,children:[y(f,{fields:I,onRemove:U,onEdit:B}),$&&y("div",{style:{marginTop:16},children:y(u,{fields:I})})]})]})}),j&&y(g,{visible:_,field:M,onSave:N,onCancel:S})]})};export{v as default};

package/components/DragTableBuilder/DragTableBuilder.less

@@ -0,0 +1,8 @@
+.drag-table-builder {
+  .builder-header {
+    margin-bottom: 16px;
+    padding: 12px;
+    background: #f5f5f5;
+    border-radius: 6px;
+  }
+}

package/components/DragTableBuilder/DropZone.js

@@ -0,0 +1 @@
+import{DeleteOutlined as e}from"@ant-design/icons";import{SortableContext as i,verticalListSortingStrategy as t,useSortable as n}from"../../node_modules/@dnd-kit/sortable/dist/sortable.esm";import{CSS as s}from"../../node_modules/@dnd-kit/utilities/dist/utilities.esm";import{Card as a,Empty as d}from"antd";import"../../src/components/DragTableBuilder/DropZone.less";import{jsx as o,jsxs as l}from"react/jsx-runtime";const r=({field:i,onRemove:t,onEdit:a})=>{const{attributes:d,listeners:r,setNodeRef:c,transform:m,transition:p,isDragging:f}=n({id:i.id}),h={transform:s.Transform.toString(m),transition:p,opacity:f?.5:1};return o("div",{ref:c,style:h,...d,...r,className:"sortable-field",children:l("div",{className:"field-content",children:[o("span",{className:"drag-handle",children:"⋮⋮"}),o("span",{className:"field-title",children:i.title||i.label}),o("span",{className:"field-dataindex",children:i.dataIndex||"未设置"}),l("div",{className:"field-actions",children:[o("span",{className:"action-btn edit-btn",onClick:e=>{e.stopPropagation(),a(i)},children:"编辑"}),o("span",{className:"action-btn delete-btn",onClick:e=>{e.stopPropagation(),t(i.id)},children:o(e,{})})]})]})})},c=({fields:e,onRemove:n,onEdit:s,children:l})=>o("div",{className:"drop-zone",children:o(a,{title:"表格字段",size:"small",className:"drop-zone-card",children:0===e.length?o(d,{description:"从左侧点击字段添加到此处",image:d.PRESENTED_IMAGE_SIMPLE}):o(i,{items:e.map(e=>e.id),strategy:t,children:o("div",{className:"field-list",children:e.map(e=>o(r,{field:e,onRemove:n,onEdit:s},e.id))})})})});export{c as default};

package/components/DragTableBuilder/DropZone.less

@@ -0,0 +1,80 @@
+.drop-zone {
+  .drop-zone-card {
+    min-height: 400px;
+
+    .field-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+  }
+
+  .sortable-field {
+    cursor: move;
+    transition: all 0.3s;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    padding: 8px 12px;
+    background: #fff;
+
+    &:hover {
+      border-color: #1890ff;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    .field-content {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+
+      .drag-handle {
+        cursor: move;
+        color: #999;
+        font-size: 12px;
+        letter-spacing: -2px;
+      }
+
+      .field-title {
+        flex: 1;
+        font-weight: 500;
+        color: #333;
+      }
+
+      .field-dataindex {
+        color: #999;
+        font-size: 12px;
+        font-family: monospace;
+      }
+
+      .field-actions {
+        display: flex;
+        gap: 8px;
+        margin-left: auto;
+
+        .action-btn {
+          cursor: pointer;
+          font-size: 12px;
+          padding: 2px 8px;
+          border-radius: 3px;
+          transition: all 0.3s;
+
+          &.edit-btn {
+            color: #1890ff;
+
+            &:hover {
+              background: #e6f7ff;
+            }
+          }
+
+          &.delete-btn {
+            color: #ff4d4f;
+
+            &:hover {
+              background: #fff1f0;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/components/DragTableBuilder/FieldConfigEditor.js

@@ -0,0 +1 @@
+import{Select as e,Input as l,Form as i,Modal as a,Space as t,InputNumber as r,Switch as d}from"antd";import{useEffect as n}from"react";import"../../src/components/DragTableBuilder/FieldConfigEditor.less";import{jsx as s,jsxs as o}from"react/jsx-runtime";const{Option:c}=e,{TextArea:h}=l,m=({visible:m,field:u,onSave:p,onCancel:x})=>{const[b]=i.useForm();return n(()=>{m&&u&&b.setFieldsValue({title:u.title||u.label||"",dataIndex:u.dataIndex||"",width:u.width||150,align:u.align||"center",fixed:u.fixed||void 0,ellipsis:void 0===u.ellipsis||u.ellipsis,sortable:void 0===u.sortable||u.sortable,render:u.render||""})},[m,u,b]),s(a,{title:"编辑字段配置",open:m,onOk:()=>{b.validateFields().then(e=>{const l={...u,title:e.title,dataIndex:e.dataIndex,width:e.width,align:e.align,fixed:e.fixed||void 0,ellipsis:e.ellipsis,sortable:e.sortable,render:e.render};p(l)})},onCancel:x,width:600,okText:"保存",cancelText:"取消",children:o(i,{form:b,layout:"vertical",className:"field-config-form",children:[s(i.Item,{label:"列标题",name:"title",rules:[{required:!0,message:"请输入列标题"}],children:s(l,{placeholder:"请输入列标题"})}),s(i.Item,{label:"数据字段名",name:"dataIndex",rules:[{required:!0,message:"请输入数据字段名"}],children:s(l,{placeholder:"请输入数据字段名（如：name, age等）"})}),o(t,{style:{width:"100%"},size:"large",children:[s(i.Item,{label:"列宽度",name:"width",initialValue:150,children:s(r,{min:50,max:1e3,style:{width:120}})}),s(i.Item,{label:"对齐方式",name:"align",initialValue:"center",children:o(e,{style:{width:120},children:[s(c,{value:"left",children:"左对齐"}),s(c,{value:"center",children:"居中"}),s(c,{value:"right",children:"右对齐"})]})})]}),o(t,{style:{width:"100%"},size:"large",children:[s(i.Item,{label:"固定列",name:"fixed",children:o(e,{placeholder:"不固定",style:{width:120},allowClear:!0,children:[s(c,{value:"left",children:"左侧固定"}),s(c,{value:"right",children:"右侧固定"})]})}),s(i.Item,{label:"超长省略",name:"ellipsis",valuePropName:"checked",initialValue:!0,children:s(d,{})}),s(i.Item,{label:"可排序",name:"sortable",valuePropName:"checked",initialValue:!0,children:s(d,{})})]}),s(i.Item,{label:"自定义渲染函数（可选）",name:"render",extra:"请输入函数体，如：return text + '元'",children:s(h,{rows:3,placeholder:"可选：输入自定义渲染函数的函数体"})})]})})};export{m as default};

package/components/DragTableBuilder/FieldConfigEditor.less

@@ -0,0 +1,5 @@
+.field-config-form {
+  .ant-form-item {
+    margin-bottom: 16px;
+  }
+}

package/components/DragTableBuilder/FieldLibrary.js

@@ -0,0 +1 @@
+import{Card as l,Tag as e}from"antd";import"../../src/components/DragTableBuilder/FieldLibrary.less";import{jsx as i,jsxs as a}from"react/jsx-runtime";const c=({field:l,onClick:c})=>i("div",{className:"clickable-field",onClick:()=>c(l),children:a(e,{color:"blue",className:"field-tag",children:[l.icon&&i("span",{className:"field-icon",children:l.icon}),i("span",{className:"field-label",children:l.label})]})}),s=({fields:e,onFieldClick:a})=>i("div",{className:"field-library",children:i(l,{title:"字段库",size:"small",className:"field-library-card",children:i("div",{className:"field-list",children:e.map(l=>i(c,{field:l,onClick:a},l.type))})})});export{s as default};

package/components/DragTableBuilder/FieldLibrary.less

@@ -0,0 +1,37 @@
+.field-library {
+  .field-library-card {
+    min-height: 400px;
+
+    .field-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+  }
+
+  .clickable-field {
+    cursor: pointer;
+    transition: all 0.3s;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    }
+
+    .field-tag {
+      margin: 0;
+      padding: 4px 12px;
+      font-size: 14px;
+      cursor: pointer;
+      user-select: none;
+
+      .field-icon {
+        margin-right: 4px;
+      }
+
+      .field-label {
+        font-weight: 500;
+      }
+    }
+  }
+}

package/components/DragTableBuilder/TablePreview.js

@@ -0,0 +1 @@
+import{Card as e,Empty as t}from"antd";import"../../src/components/DragTableBuilder/TablePreview.less";import{jsx as r,jsxs as i}from"react/jsx-runtime";const a=({fields:a,dataSource:l})=>{const n=l||(0===a.length?[]:Array.from({length:3},(e,t)=>{const r={};return a.forEach(e=>{const i=e.dataIndex;if(i)switch(e.type){case"text":r[i]=`示例文本${t+1}`;break;case"number":r[i]=Math.floor(1e3*Math.random());break;case"date":r[i]="2024-01-01";break;case"datetime":r[i]="2024-01-01 12:00:00";break;case"select":r[i]=t%2==0?"选项1":"选项2";break;case"boolean":r[i]=t%2==0?"是":"否";break;case"email":r[i]=`example${t}@test.com`;break;case"url":r[i]=`https://example.com/${t}`;break;default:r[i]=`数据${t+1}`}}),r})),s=a.reduce((e,t)=>e+(t.width||150),0);return r("div",{className:"table-preview",children:r(e,{title:"表格预览",size:"small",className:"preview-card",children:0===a.length?r(t,{description:"暂无数据，请先添加字段",image:t.PRESENTED_IMAGE_SIMPLE}):r("div",{className:"native-table-container",children:i("table",{className:"native-table",style:{width:s},children:[r("thead",{children:r("tr",{children:a.map(e=>r("th",{style:{width:e.width||150,textAlign:e.align||"center",position:e.fixed?"sticky":"static",left:"left"===e.fixed?0:"auto",right:"right"===e.fixed?0:"auto",zIndex:e.fixed?2:1},children:e.title||e.label},e.id))})}),r("tbody",{children:n.map((e,t)=>r("tr",{children:a.map(i=>{const a=e[i.dataIndex],l=((e,t,r,i)=>{if(e.render)try{return new Function("text","record","index",e.render)(t,r,i)}catch(e){return console.error("渲染函数执行错误:",e),t}return t})(i,a,e,t);return r("td",{style:{width:i.width||150,textAlign:i.align||"center",overflow:!1!==i.ellipsis?"hidden":"visible",textOverflow:!1!==i.ellipsis?"ellipsis":"clip",whiteSpace:!1!==i.ellipsis?"nowrap":"normal"},title:!1!==i.ellipsis?a:void 0,children:l},i.id)})},t))})]})})})})};export{a as default};

package/components/DragTableBuilder/TablePreview.less

@@ -0,0 +1,69 @@
+.table-preview {
+  .preview-card {
+    .native-table-container {
+      overflow-x: auto;
+      overflow-y: auto;
+      max-height: 300px;
+      border: 1px solid #f0f0f0;
+      border-radius: 4px;
+    }
+
+    .native-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 13px;
+      background: #fff;
+
+      thead {
+        position: sticky;
+        top: 0;
+        z-index: 10;
+        background: #fafafa;
+      }
+
+      th {
+        padding: 8px 12px;
+        font-weight: 600;
+        color: rgba(0, 0, 0, 0.88);
+        background: #fafafa;
+        border: 1px solid #f0f0f0;
+        white-space: nowrap;
+
+        &[style*="position: sticky"] {
+          background: #fafafa;
+          z-index: 2;
+        }
+      }
+
+      tbody {
+        tr {
+          transition: background 0.3s;
+
+          &:hover {
+            background: #fafafa;
+          }
+
+          &:nth-child(even) {
+            background: #fafafa;
+          }
+
+          &:hover:nth-child(even) {
+            background: #f0f0f0;
+          }
+        }
+      }
+
+      td {
+        padding: 8px 12px;
+        color: rgba(0, 0, 0, 0.88);
+        border: 1px solid #f0f0f0;
+        background: #fff;
+
+        &[style*="position: sticky"] {
+          background: #fff;
+          z-index: 1;
+        }
+      }
+    }
+  }
+}

package/components/DragTableBuilder/index.d.ts

@@ -0,0 +1,71 @@
+import type { FC, ReactNode } from "react";
+import type { ColumnsType } from "antd/es/table";
+
+/**
+ * 字段类型定义
+ */
+export interface FieldType {
+  /** 字段类型标识 */
+  type: string;
+  /** 字段显示名称 */
+  label: string;
+  /** 字段图标 */
+  icon?: string;
+}
+
+/**
+ * 表格字段配置
+ */
+export interface TableField {
+  /** 字段唯一标识 */
+  id: string;
+  /** 字段类型 */
+  type: string;
+  /** 字段标签 */
+  label: string;
+  /** 列标题 */
+  title: string;
+  /** 数据字段名 */
+  dataIndex: string;
+  /** 列宽度 */
+  width?: number;
+  /** 对齐方式 */
+  align?: "left" | "center" | "right";
+  /** 固定列 */
+  fixed?: "left" | "right";
+  /** 超长省略 */
+  ellipsis?: boolean;
+  /** 可排序 */
+  sortable?: boolean;
+  /** 自定义渲染函数 */
+  render?: string;
+}
+
+/**
+ * DragTableBuilder 组件属性
+ */
+export interface DragTableBuilderProps {
+  /** 可用字段类型列表 */
+  fieldTypes?: FieldType[];
+  /** 初始字段列表 */
+  initialFields?: TableField[];
+  /** 字段列表变化回调 */
+  onChange?: (fields: TableField[]) => void;
+  /** 导出配置回调 */
+  onExport?: (config: ColumnsType<any>) => void;
+  /** 是否显示预览区域 */
+  showPreview?: boolean;
+  /** 是否显示字段库 */
+  showLibrary?: boolean;
+  /** 是否显示配置编辑器 */
+  showConfigEditor?: boolean;
+  /** 自定义预览数据 */
+  dataSource?: any[];
+}
+
+/**
+ * 拖拽式表格构建器组件
+ */
+declare const DragTableBuilder: FC<DragTableBuilderProps>;
+
+export default DragTableBuilder;

package/components/DragTableBuilder/index.js

@@ -0,0 +1 @@
+import r from"./DragTableBuilder.js";export{r as default};

package/components/FormBuilder/FormBuilder.d.ts

@@ -1,5 +1,4 @@
 import type { FormInstance, FormProps } from "antd/es/form";
-import type { useForm, useWatch } from "antd/es/form/Form";
 import type { Gutter } from "antd/es/grid/row";
 import type { FC, ReactNode } from "react";
 import type { FormOption, FormValues } from "./FormItemsRenderer";
@@ -42,8 +41,8 @@ export interface FormBuilderProps extends Omit<FormProps, "form"> {
  * 表单构建器组件
  */
 declare const FormBuilder: FC<FormBuilderProps> & {
-  useForm: typeof useForm;
-  useWatch: typeof useWatch;
+  useForm: typeof import("antd").Form.useForm;
+  useWatch: typeof import("antd").Form.useWatch;
 };
 
 export default FormBuilder;

package/components/FormBuilder/FormItemsRenderer.d.ts

@@ -2,12 +2,14 @@ import type { ColProps } from "antd/es/col";
 import type { FormItemProps, Rule } from "antd/es/form";
 import type { FormListFieldData } from "antd/es/form/FormList";
 import type { Gutter } from "antd/es/grid/row";
-import type { NamePath } from "rc-field-form/lib/interface";
 import type { FC, ReactNode } from "react";
 import type { FORM_ITEM_RENDER_TYPE_MAP } from "../../enum/formItemRender";
 
+/** 表单项 name */
+export type FormFieldName = string | number | (string | number)[];
+
 /**
- * 选项项数据类型
+ * 选择项数据类型
  */
 export interface OptionItem {
   /** ID字段 */
@@ -22,7 +24,7 @@ export interface OptionItem {
 /**
  * 字段键配置
  */
-export interface itemsFieldConfig {
+export interface ItemsFieldConfig {
   /** 值字段的键名，默认 'bianma' */
   valueKey?: string;
   /** 标签字段的键名，默认 'name' */
@@ -71,17 +73,15 @@ export interface FormListUniqueProps {
 }
 
 /**
- * 表单配置项
+ * 表单配置项公共字段
  */
-export interface FormOption<T extends keyof FORM_ITEM_RENDER_TYPE_MAP = keyof FORM_ITEM_RENDER_TYPE_MAP> {
+export interface FormOptionBase {
   /** React 需要的 key，如果传递了唯一的 name，则不需要 */
   key?: string;
   /** 表单项字段名 */
-  name?: string | string[];
+  name?: FormFieldName;
   /** 表单项标签 */
   label?: ReactNode;
-  /** 渲染类型 */
-  render?: T | ReactNode;
   /** 占据栅格列数，默认 12 */
   span?: number | string;
   /** 是否必填，默认 true，支持函数动态计算 */
@@ -101,11 +101,9 @@ export interface FormOption<T extends keyof FORM_ITEM_RENDER_TYPE_MAP = keyof FO
   /** 选项数据（用于 select、radio、checkbox） */
   items?: OptionItem[];
   /** 字段键配置 */
-  itemsField?: itemsFieldConfig;
+  itemsField?: ItemsFieldConfig;
   /** checkbox 的栅格数量，如果不传入不使用栅格，传入才使用 */
   checkboxCol?: number;
-  /** 传递给表单控件的属性，支持函数动态计算 */
-  componentProps?: FORM_ITEM_RENDER_TYPE_MAP[T] | ((formValues: FormValues) => FORM_ITEM_RENDER_TYPE_MAP[T]);
   /** 传递给 Form.Item 的属性，支持函数动态计算 */
   formItemProps?: FormItemProps | ((formValues: FormValues) => FormItemProps);
   /** label 栅格配置，默认直接使用外层的 labelCol，如果 span 等于 24，是外层的 labelCol.span 一半 */
@@ -115,13 +113,48 @@ export interface FormOption<T extends keyof FORM_ITEM_RENDER_TYPE_MAP = keyof FO
   /** 是否应该更新（用于表单联动） */
   shouldUpdate?: boolean | ((prevValues: FormValues, nextValues: FormValues, info: { source?: string }) => boolean);
   /** 依赖字段（用于表单联动） */
-  dependencies?: NamePath[];
+  dependencies?: FormFieldName[];
   /** 是否仅用于保存标签，不渲染到页面上，只在表单中保存数据，默认 false */
   onlyForLabel?: boolean;
   /** Form.List 独有的属性 */
   formListUniqueProps?: FormListUniqueProps | ((formValues: FormValues) => FormListUniqueProps);
 }
 
+/**
+ * 按 render 类型区分的表单项
+ */
+export type FormOptionByRender<K extends keyof FORM_ITEM_RENDER_TYPE_MAP> = FormOptionBase & {
+  /** 渲染类型（写字面量时 componentProps 会按该类型推导） */
+  render: K;
+  /** 传递给表单控件的属性，类型由 render 决定 */
+  componentProps?: FORM_ITEM_RENDER_TYPE_MAP[K] | ((formValues: FormValues) => FORM_ITEM_RENDER_TYPE_MAP[K]);
+};
+
+/**
+ * 不写 render 或 render 为 input 时的表单项（默认按输入框）
+ */
+export type FormOptionDefault = FormOptionBase & {
+  render?: "input" | undefined;
+  /** 传递给 Input 的属性 */
+  componentProps?: FORM_ITEM_RENDER_TYPE_MAP["input"] | ((formValues: FormValues) => FORM_ITEM_RENDER_TYPE_MAP["input"]);
+};
+
+/**
+ * 自定义渲染时的表单项（render 为 ReactNode 时使用）
+ */
+export type FormOptionCustomRender = FormOptionBase & {
+  render?: ReactNode;
+  componentProps?: Record<string, any> | ((formValues: FormValues) => Record<string, any>);
+};
+
+/**
+ * 表单配置项
+ */
+export type FormOption
+  = | FormOptionDefault
+    | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender<K> }[keyof FORM_ITEM_RENDER_TYPE_MAP]
+    | FormOptionCustomRender;
+
 /**
  * FormItemsRenderer 组件属性
  */

package/components/Search/index.d.ts

@@ -1,5 +1,4 @@
 import type { FormInstance, FormProps } from "antd/es/form";
-import type { useForm, useWatch } from "antd/es/form/Form";
 import type { FC, ReactNode } from "react";
 import type { FormOption } from "../FormBuilder/FormItemsRenderer";
 
@@ -38,8 +37,8 @@ export interface SearchProps extends Omit<FormProps, "form" | "onFinish"> {
  * 支持自动展开/收起功能，当表单项超过4个时显示展开/收起按钮
  */
 declare const Search: FC<SearchProps> & {
-  useForm: typeof useForm;
-  useWatch: typeof useWatch;
+  useForm: typeof import("antd").Form.useForm;
+  useWatch: typeof import("antd").Form.useWatch;
 };
 
 export default Search;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "zy-react-library",
   "private": false,
-  "version": "1.2.3",
+  "version": "1.2.4",
   "type": "module",
   "description": "",
   "author": "LiuJiaNan",