imean-service-engine-htmx-plugin 2.6.0 → 2.7.0

package/dist/index.d.mts

@@ -84,6 +84,39 @@ declare abstract class PageModel {
  * HtmxAdminPlugin 核心类型定义
  */
 
+/**
+ * 操作按钮配置
+ */
+interface ActionButton {
+    /** 按钮文本 */
+    label: string;
+    /** 链接地址（页面模式使用） */
+    href?: string;
+    /** HTTP 方法 */
+    method?: "get" | "post" | "put" | "delete";
+    /** 按钮样式 */
+    variant?: "primary" | "secondary" | "danger" | "ghost";
+    /** HTMX GET 请求（弹窗模式使用） */
+    hxGet?: string;
+    /** HTMX POST 请求 */
+    hxPost?: string;
+    /** HTMX PUT 请求 */
+    hxPut?: string;
+    /** HTMX DELETE 请求 */
+    hxDelete?: string;
+    /** 确认提示 */
+    confirm?: string;
+    /** 是否关闭弹窗（设置为 true 时，点击按钮会自动关闭弹窗，无需写代码） */
+    close?: boolean;
+    /** 是否提交表单（设置为 true 时，按钮会提交指定的表单，需要配合 formId 使用） */
+    submit?: boolean;
+    /** 表单 ID（当 submit 为 true 时，指定要提交的表单 ID） */
+    formId?: string;
+    /** 自定义类名 */
+    className?: string;
+    /** 链接目标（如 "_blank" 表示新窗口打开） */
+    target?: string;
+}
 /**
  * 对话框大小类型
  */
@@ -390,20 +423,101 @@ interface FormField {
     /** HTML input step 属性（用于 number 类型，支持小数） */
     step?: string | number;
 }
+/**
+ * 字段渲染器属性
+ * 统一接口，可在不同 Feature 中复用
+ */
+interface FieldRendererProps<T = any, K extends keyof T = keyof T> {
+    /** 字段值 */
+    value: T[K];
+    /** 完整的初始数据项 */
+    item: Partial<T>;
+    /** 字段名 */
+    name: string;
+    /** 字段标签(没有会使用name的值作为标签) */
+    label: string;
+}
 /**
  * 表单字段渲染器属性
  * 统一接口，可在不同 Feature 中复用
  */
-interface FormFieldRendererProps<T = any> {
+interface FormFieldRendererProps<T = any, K extends keyof T = keyof T> extends FieldRendererProps<T, K> {
     /** 字段定义 */
     field: FormField;
-    /** 当前值（已解析的对象/数组，不是 JSON 字符串） */
-    value: any;
-    /** 完整的初始数据项（用于编辑模式，包含所有字段的完整数据） */
-    item?: Partial<T>;
-    /** 字段名（用于更新隐藏字段） */
-    name: string;
 }
+/**
+ * 字段渲染器
+ * 用于渲染字段，可用于自定义渲染器
+ */
+interface FieldRenderer<T extends FieldRendererProps = FieldRendererProps> {
+    (props: T): any;
+}
+/**
+ * 表单字段渲染器类型别名
+ * 用于统一表单字段渲染器的类型定义
+ * 支持字段名泛型，可以根据字段名推导出对应的值类型
+ */
+type FormFieldRenderer<T = any, K extends keyof T = keyof T> = FieldRenderer<FormFieldRendererProps<T, K>>;
+/**
+ * 表单字段渲染器映射类型
+ * 根据字段名自动推导对应的值类型，并严格约束 key 只能是 T 的字段名
+ *
+ * 使用方式：
+ * ```typescript
+ * formFieldRenderers: {
+ *   banners: (props) => {
+ *     // props.value 自动推导为 T["banners"] 类型
+ *     return <BannerEditor {...props} value={props.value} />;
+ *   }
+ * }
+ * ```
+ *
+ * TypeScript 会根据字段名自动推导对应的值类型，无需手动添加类型注解
+ * key 约束：只能使用 T 中存在的字段名，拼写错误会被 TypeScript 检查出来
+ * 例如：如果写成了 "tgas" 而不是 "tags"，TypeScript 会报错
+ *
+ * 注意：为了支持类型推导，移除了索引签名，运行时访问字符串键时需要使用类型断言
+ */
+/**
+ * 表单字段渲染器映射类型
+ * 根据字段名自动推导对应的值类型，并严格约束 key 只能是 T 的字段名
+ *
+ * 使用方式：
+ * ```typescript
+ * formFieldRenderers: {
+ *   banners: (props) => {
+ *     // props.value 自动推导为 T["banners"] 类型
+ *     return <BannerEditor {...props} value={props.value} />;
+ *   }
+ * }
+ * ```
+ *
+ * TypeScript 会根据字段名自动推导对应的值类型，无需手动添加类型注解
+ * key 约束：只能使用 T 中存在的字段名，拼写错误会被 TypeScript 检查出来
+ * 例如：如果写成了 "tgas" 而不是 "tags"，TypeScript 会报错
+ *
+ * 注意：为了支持类型推导，移除了索引签名，运行时访问字符串键时需要使用类型断言
+ */
+type FormFieldRendererMap<T = any> = {
+    [K in keyof T]?: FormFieldRenderer<T, K>;
+};
+/**
+ * 字段渲染器类型别名（用于详情页等非表单场景）
+ * 用于统一字段渲染器的类型定义
+ * 支持字段名泛型，可以根据字段名推导出对应的值类型
+ */
+type FieldRendererType<T = any, K extends keyof T = keyof T> = FieldRenderer<FieldRendererProps<T, K>>;
+/**
+ * 字段渲染器映射类型
+ * 根据字段名自动推导对应的值类型
+ * 使用 Record 类型保持兼容性，但在使用时可以通过类型断言获得字段级别的类型推导
+ *
+ * 注意：在使用时，TypeScript 会根据字段名自动推导对应的值类型
+ * 例如：fieldRenderers.banners 的类型会被推导为 FieldRendererType<T, "banners">
+ */
+type FieldRendererTypeMap<T = any> = {
+    [K in keyof T]?: FieldRendererType<T, K>;
+} & Record<string, FieldRendererType<T, any> | undefined> & Partial<Record<keyof T, FieldRendererType<T, keyof T>>>;
 
 /**
  * Feature 基类
@@ -468,6 +582,11 @@ declare abstract class BaseFeature implements Feature {
     render?(context: FeatureContext): Promise<any>;
 }
 
+/**
+ * 表单 Feature 基类
+ * 提供创建和编辑 Feature 的公共逻辑
+ */
+
 /**
  * 表单操作类型
  */
@@ -484,7 +603,9 @@ declare abstract class BaseFormFeature<T extends {
     /** 当前请求的表单 ID（用于在 render 和 getActions 之间共享） */
     private currentFormId?;
     /** 自定义表单字段渲染器 */
-    protected formFieldRenderers?: Record<string, (props: FormFieldRendererProps<T>) => any>;
+    protected formFieldRenderers?: {
+        [K in keyof T]?: FormFieldRenderer<T, K>;
+    };
     /**
      * 获取或生成表单 ID（确保在同一个请求中保持一致）
      */
@@ -591,6 +712,10 @@ declare class CustomFeature extends BaseFeature {
     render(context: FeatureContext): Promise<any>;
 }
 
+/**
+ * 默认创建 Feature
+ */
+
 /**
  * 默认创建 Feature
  * 类型通过 schema 的 z.infer 推断
@@ -616,7 +741,7 @@ declare class DefaultCreateFeature<T extends {
         /** 字段分组配置（可选，用于将字段分组展示为 Tab） */
         groups?: FieldGroup[];
         /** 自定义表单字段渲染器 */
-        formFieldRenderers?: Record<string, (props: FormFieldRendererProps<T>) => any>;
+        formFieldRenderers?: FormFieldRendererMap<T>;
     });
     getFormAction(): "create";
     getRoutes(): ({
@@ -689,7 +814,7 @@ declare class DefaultDetailFeature<T extends {
         /** 详情显示字段名（可选，不提供则显示 schema 中的所有字段） */
         detailFieldNames?: string[];
         /** 自定义字段渲染函数（可选，key 为字段名，value 为渲染函数） */
-        fieldRenderers?: Record<string, (value: any, item: T) => any>;
+        fieldRenderers?: FieldRendererTypeMap<T>;
         /** 字段分组配置（可选，用于将字段分组展示为卡片） */
         groups?: FieldGroup[];
     });
@@ -703,6 +828,10 @@ declare class DefaultDetailFeature<T extends {
     getActions(context: FeatureContext): Promise<any>;
 }
 
+/**
+ * 默认编辑 Feature
+ */
+
 /**
  * 默认编辑 Feature
  * 类型通过 schema 的 z.infer 推断
@@ -729,8 +858,11 @@ declare class DefaultEditFeature<T extends {
         formFieldNames?: string[];
         /** 字段分组配置（可选，用于将字段分组展示为 Tab） */
         groups?: FieldGroup[];
-        /** 自定义表单字段渲染器 */
-        formFieldRenderers?: Record<string, (props: FormFieldRendererProps<T>) => any>;
+        /** 自定义表单字段渲染器
+         * 使用 satisfies FormFieldRendererMap<T> 来检查 key 约束
+         * 例如：formFieldRenderers: { ... } satisfies FormFieldRendererMap<T>
+         */
+        formFieldRenderers?: FormFieldRendererMap<T>;
     });
     getFormAction(): "edit";
     getRoutes(): ({
@@ -935,17 +1067,213 @@ interface ErrorAlertProps {
  */
 declare function ErrorAlert(props: ErrorAlertProps): hono_jsx_jsx_dev_runtime.JSX.Element;
 
+interface FilterFormProps {
+    /** 筛选字段 */
+    fields: FormField[];
+    /** 列表路径（用于提交筛选表单） */
+    listPath: string;
+    /** 当前筛选参数 */
+    currentFilters?: Record<string, any>;
+}
+/**
+ * 筛选表单组件
+ */
+declare function FilterForm(props: FilterFormProps): hono_jsx_jsx_dev_runtime.JSX.Element | null;
+
+/**
+ * 面包屑组件
+ */
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+}
+/**
+ * 面包屑组件
+ */
+declare function Breadcrumb(props: BreadcrumbProps): hono_jsx_jsx_dev_runtime.JSX.Element | null;
+
+interface HeaderProps {
+    /** 面包屑项 */
+    breadcrumbs?: BreadcrumbItem[];
+    /** 用户信息 */
+    userInfo?: UserInfo | null;
+    /** 退出登录的URL */
+    logoutUrl?: string;
+    /** 页面标题（当没有面包屑时显示） */
+    title?: string;
+}
+/**
+ * 头部组件
+ */
+declare function Header(props: HeaderProps): hono_jsx_jsx_dev_runtime.JSX.Element;
+
 /**
  * 加载条组件
  * 用于显示 HTMX 请求的加载状态
  */
 declare function LoadingBar(): hono_jsx_jsx_dev_runtime.JSX.Element;
 
-interface ObjectEditorProps extends FormFieldRendererProps {
-    /** 对象的 Zod schema（用于自动渲染结构） */
-    objectSchema?: z.ZodObject<any>;
+/**
+ * 表格组件
+ */
+/**
+ * 表格组件 Props
+ */
+interface TableProps<T = any> {
+    /** 数据列表 */
+    items: T[];
+    /** 列定义 */
+    columns: Array<{
+        key: string;
+        label: string;
+        render?: (value: any, item: T) => any;
+    }>;
+    /** 操作列 */
+    actions?: Array<{
+        label: string;
+        href: (item: T) => string;
+        method?: string;
+        class?: string;
+        target?: string;
+    }>;
+    /** 分页信息 */
+    pagination?: {
+        page: number;
+        pageSize: number;
+        total: number;
+        totalPages: number;
+        baseUrl: string;
+        currentParams?: Record<string, string | number | undefined>;
+    };
+    /** 表格标题 */
+    title?: string;
+    /** 表格操作按钮（如导出、清空、刷新等） */
+    tableActions?: Array<{
+        label: string;
+        href?: string;
+        hxGet?: string;
+        hxPost?: string;
+        hxDelete?: string;
+        variant?: "primary" | "secondary" | "danger" | "ghost";
+        hxConfirm?: string;
+    }>;
+    /** 操作列样式（link 或 button） */
+    actionStyle?: "link" | "button";
 }
-declare function ObjectEditor(props: ObjectEditorProps): hono_jsx_jsx_dev_runtime.JSX.Element;
+/**
+ * 表格组件
+ */
+declare function Table<T extends {
+    id: string | number;
+}>(props: TableProps<T>): hono_jsx_jsx_dev_runtime.JSX.Element;
+
+/**
+ * 分页组件
+ */
+interface PaginationProps {
+    /** 当前页码 */
+    page: number;
+    /** 每页数量 */
+    pageSize: number;
+    /** 总记录数 */
+    total: number;
+    /** 总页数 */
+    totalPages: number;
+    /** 基础 URL */
+    baseUrl: string;
+    /** 当前查询参数（用于保留筛选条件等） */
+    currentParams?: Record<string, string | number | undefined>;
+}
+/**
+ * 分页组件
+ */
+declare function Pagination(props: PaginationProps): hono_jsx_jsx_dev_runtime.JSX.Element | null;
+
+/**
+ * 卡片组件
+ */
+interface CardProps {
+    /** 卡片内容 */
+    children: any;
+    /** 卡片标题 */
+    title?: string;
+    /** 自定义类名 */
+    className?: string;
+    /** 是否显示阴影 */
+    shadow?: boolean;
+    /** 是否显示边框 */
+    bordered?: boolean;
+    /** 是否去掉内边距 */
+    noPadding?: boolean;
+}
+/**
+ * 卡片组件
+ */
+declare function Card(props: CardProps): hono_jsx_jsx_dev_runtime.JSX.Element;
+
+/**
+ * 空状态组件
+ */
+interface EmptyStateProps {
+    /** 提示文本 */
+    message?: string;
+    /** 自定义内容 */
+    children?: any;
+}
+/**
+ * 空状态组件
+ */
+declare function EmptyState(props: EmptyStateProps): hono_jsx_jsx_dev_runtime.JSX.Element;
+
+/**
+ * 按钮组件
+ * 只负责样式，其他属性（如 HTMX 属性）通过解构动态传递
+ */
+interface ButtonProps {
+    /** 按钮文本 */
+    children: any;
+    /** 按钮类型 */
+    variant?: "primary" | "secondary" | "danger" | "ghost";
+    /** 按钮大小 */
+    size?: "sm" | "md" | "lg";
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 自定义类名 */
+    className?: string;
+    /** 其他属性（包括 HTMX 属性、href 等） */
+    [key: string]: any;
+}
+/**
+ * 按钮组件
+ * 只负责样式，其他属性通过解构动态传递
+ */
+declare function Button(props: ButtonProps): hono_jsx_jsx_dev_runtime.JSX.Element;
+
+interface PermissionDeniedContentProps {
+    /** 操作ID（权限标识） */
+    operationId?: string;
+    /** 请求路径 */
+    fromPath?: string;
+    /** 错误消息 */
+    message?: string;
+    /** 用户信息 */
+    userInfo?: UserInfo | null;
+    /** 插件选项 */
+    pluginOptions?: HtmxAdminPluginOptions;
+    /** 是否在弹框中显示（用于 HTMX 请求） */
+    isDialog?: boolean;
+}
+/**
+ * 权限提示内容组件（用于弹框或页面）
+ */
+declare function PermissionDeniedContent(props: PermissionDeniedContentProps): hono_jsx_jsx_dev_runtime.JSX.Element;
+/**
+ * 权限提示页面组件（完整页面，用于整页加载）
+ */
+declare function PermissionDeniedPage(props: PermissionDeniedContentProps): hono_jsx_jsx_dev_runtime.JSX.Element;
 
 interface StringArrayEditorProps extends FormFieldRendererProps {
     /** 占位符文本（可选） */
@@ -973,6 +1301,12 @@ interface TagsEditorProps extends FormFieldRendererProps {
  */
 declare function TagsEditor(props: TagsEditorProps): hono_jsx_jsx_dev_runtime.JSX.Element;
 
+interface ObjectEditorProps extends FormFieldRendererProps {
+    /** 对象的 Zod schema（用于自动渲染结构） */
+    objectSchema?: z.ZodObject<any>;
+}
+declare function ObjectEditor(props: ObjectEditorProps): hono_jsx_jsx_dev_runtime.JSX.Element;
+
 /**
  * 可拖拽排序列表组件
  * 使用 HTML5 原生拖放 API 实现拖拽排序
@@ -1010,4 +1344,4 @@ interface SortableListProps {
  */
 declare function SortableList(props: SortableListProps): hono_jsx_jsx_dev_runtime.JSX.Element;
 
-export { type AuthProvider, BaseFeature, CustomFeature, DefaultCreateFeature, DefaultDeleteFeature, DefaultDetailFeature, DefaultEditFeature, DefaultListFeature, Dialog, type DialogProps, type DialogSize, ErrorAlert, type ErrorAlertProps, type Feature, type FeatureContext, type FeatureType, type FieldMetadata, HtmxAdminPlugin, type HtmxAdminPluginOptions, type ListParams, type ListResult, LoadingBar, type NavItemConfig, type Notification, type NotificationType, ObjectEditor, type ObjectEditorProps, type PageMetadata, PageModel, type PermissionResult, SortableList, StringArrayEditor, type StringArrayEditorProps, TagsEditor, type TagsEditorProps, type UserInfo, checkUserPermission, getUserInfo, modelNameToPath, parseListParams };
+export { type ActionButton, type AuthProvider, BaseFeature, BaseFormFeature, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, type CardProps, CustomFeature, DefaultCreateFeature, DefaultDeleteFeature, DefaultDetailFeature, DefaultEditFeature, DefaultListFeature, Dialog, type DialogProps, type DialogSize, EmptyState, type EmptyStateProps, ErrorAlert, type ErrorAlertProps, type Feature, type FeatureContext, type FeatureType, type FieldGroup, type FieldMetadata, type FieldRenderer, type FieldRendererProps, type FieldRendererType, type FieldRendererTypeMap, FilterForm, type FormAction, type FormField, type FormFieldRenderer, type FormFieldRendererMap, type FormFieldRendererProps, Header, type HeaderProps, HtmxAdminPlugin, type HtmxAdminPluginOptions, type ListParams, type ListResult, LoadingBar, type ModelField, type NavItemConfig, type Notification, type NotificationType$1 as NotificationType, ObjectEditor, type ObjectEditorProps, type OpenMode, type PageMetadata, PageModel, Pagination, type PaginationProps, PermissionDeniedContent, type PermissionDeniedContentProps, PermissionDeniedPage, type PermissionResult, type ResolvedHtmxAdminPluginOptions, SortableList, type SortableListProps, StringArrayEditor, type StringArrayEditorProps, Table, type TableProps, TagsEditor, type TagsEditorProps, type UserInfo, checkUserPermission, getUserInfo, modelNameToPath, parseListParams };

package/dist/index.d.ts

@@ -84,6 +84,39 @@ declare abstract class PageModel {
  * HtmxAdminPlugin 核心类型定义
  */
 
+/**
+ * 操作按钮配置
+ */
+interface ActionButton {
+    /** 按钮文本 */
+    label: string;
+    /** 链接地址（页面模式使用） */
+    href?: string;
+    /** HTTP 方法 */
+    method?: "get" | "post" | "put" | "delete";
+    /** 按钮样式 */
+    variant?: "primary" | "secondary" | "danger" | "ghost";
+    /** HTMX GET 请求（弹窗模式使用） */
+    hxGet?: string;
+    /** HTMX POST 请求 */
+    hxPost?: string;
+    /** HTMX PUT 请求 */
+    hxPut?: string;
+    /** HTMX DELETE 请求 */
+    hxDelete?: string;
+    /** 确认提示 */
+    confirm?: string;
+    /** 是否关闭弹窗（设置为 true 时，点击按钮会自动关闭弹窗，无需写代码） */
+    close?: boolean;
+    /** 是否提交表单（设置为 true 时，按钮会提交指定的表单，需要配合 formId 使用） */
+    submit?: boolean;
+    /** 表单 ID（当 submit 为 true 时，指定要提交的表单 ID） */
+    formId?: string;
+    /** 自定义类名 */
+    className?: string;
+    /** 链接目标（如 "_blank" 表示新窗口打开） */
+    target?: string;
+}
 /**
  * 对话框大小类型
  */
@@ -390,20 +423,101 @@ interface FormField {
     /** HTML input step 属性（用于 number 类型，支持小数） */
     step?: string | number;
 }
+/**
+ * 字段渲染器属性
+ * 统一接口，可在不同 Feature 中复用
+ */
+interface FieldRendererProps<T = any, K extends keyof T = keyof T> {
+    /** 字段值 */
+    value: T[K];
+    /** 完整的初始数据项 */
+    item: Partial<T>;
+    /** 字段名 */
+    name: string;
+    /** 字段标签(没有会使用name的值作为标签) */
+    label: string;
+}
 /**
  * 表单字段渲染器属性
  * 统一接口，可在不同 Feature 中复用
  */
-interface FormFieldRendererProps<T = any> {
+interface FormFieldRendererProps<T = any, K extends keyof T = keyof T> extends FieldRendererProps<T, K> {
     /** 字段定义 */
     field: FormField;
-    /** 当前值（已解析的对象/数组，不是 JSON 字符串） */
-    value: any;
-    /** 完整的初始数据项（用于编辑模式，包含所有字段的完整数据） */
-    item?: Partial<T>;
-    /** 字段名（用于更新隐藏字段） */
-    name: string;
 }
+/**
+ * 字段渲染器
+ * 用于渲染字段，可用于自定义渲染器
+ */
+interface FieldRenderer<T extends FieldRendererProps = FieldRendererProps> {
+    (props: T): any;
+}
+/**
+ * 表单字段渲染器类型别名
+ * 用于统一表单字段渲染器的类型定义
+ * 支持字段名泛型，可以根据字段名推导出对应的值类型
+ */
+type FormFieldRenderer<T = any, K extends keyof T = keyof T> = FieldRenderer<FormFieldRendererProps<T, K>>;
+/**
+ * 表单字段渲染器映射类型
+ * 根据字段名自动推导对应的值类型，并严格约束 key 只能是 T 的字段名
+ *
+ * 使用方式：
+ * ```typescript
+ * formFieldRenderers: {
+ *   banners: (props) => {
+ *     // props.value 自动推导为 T["banners"] 类型
+ *     return <BannerEditor {...props} value={props.value} />;
+ *   }
+ * }
+ * ```
+ *
+ * TypeScript 会根据字段名自动推导对应的值类型，无需手动添加类型注解
+ * key 约束：只能使用 T 中存在的字段名，拼写错误会被 TypeScript 检查出来
+ * 例如：如果写成了 "tgas" 而不是 "tags"，TypeScript 会报错
+ *
+ * 注意：为了支持类型推导，移除了索引签名，运行时访问字符串键时需要使用类型断言
+ */
+/**
+ * 表单字段渲染器映射类型
+ * 根据字段名自动推导对应的值类型，并严格约束 key 只能是 T 的字段名
+ *
+ * 使用方式：
+ * ```typescript
+ * formFieldRenderers: {
+ *   banners: (props) => {
+ *     // props.value 自动推导为 T["banners"] 类型
+ *     return <BannerEditor {...props} value={props.value} />;
+ *   }
+ * }
+ * ```
+ *
+ * TypeScript 会根据字段名自动推导对应的值类型，无需手动添加类型注解
+ * key 约束：只能使用 T 中存在的字段名，拼写错误会被 TypeScript 检查出来
+ * 例如：如果写成了 "tgas" 而不是 "tags"，TypeScript 会报错
+ *
+ * 注意：为了支持类型推导，移除了索引签名，运行时访问字符串键时需要使用类型断言
+ */
+type FormFieldRendererMap<T = any> = {
+    [K in keyof T]?: FormFieldRenderer<T, K>;
+};
+/**
+ * 字段渲染器类型别名（用于详情页等非表单场景）
+ * 用于统一字段渲染器的类型定义
+ * 支持字段名泛型，可以根据字段名推导出对应的值类型
+ */
+type FieldRendererType<T = any, K extends keyof T = keyof T> = FieldRenderer<FieldRendererProps<T, K>>;
+/**
+ * 字段渲染器映射类型
+ * 根据字段名自动推导对应的值类型
+ * 使用 Record 类型保持兼容性，但在使用时可以通过类型断言获得字段级别的类型推导
+ *
+ * 注意：在使用时，TypeScript 会根据字段名自动推导对应的值类型
+ * 例如：fieldRenderers.banners 的类型会被推导为 FieldRendererType<T, "banners">
+ */
+type FieldRendererTypeMap<T = any> = {
+    [K in keyof T]?: FieldRendererType<T, K>;
+} & Record<string, FieldRendererType<T, any> | undefined> & Partial<Record<keyof T, FieldRendererType<T, keyof T>>>;
 
 /**
  * Feature 基类
@@ -468,6 +582,11 @@ declare abstract class BaseFeature implements Feature {
     render?(context: FeatureContext): Promise<any>;
 }
 
+/**
+ * 表单 Feature 基类
+ * 提供创建和编辑 Feature 的公共逻辑
+ */
+
 /**
  * 表单操作类型
  */
@@ -484,7 +603,9 @@ declare abstract class BaseFormFeature<T extends {
     /** 当前请求的表单 ID（用于在 render 和 getActions 之间共享） */
     private currentFormId?;
     /** 自定义表单字段渲染器 */
-    protected formFieldRenderers?: Record<string, (props: FormFieldRendererProps<T>) => any>;
+    protected formFieldRenderers?: {
+        [K in keyof T]?: FormFieldRenderer<T, K>;
+    };
     /**
      * 获取或生成表单 ID（确保在同一个请求中保持一致）
      */
@@ -591,6 +712,10 @@ declare class CustomFeature extends BaseFeature {
     render(context: FeatureContext): Promise<any>;
 }
 
+/**
+ * 默认创建 Feature
+ */
+
 /**
  * 默认创建 Feature
  * 类型通过 schema 的 z.infer 推断
@@ -616,7 +741,7 @@ declare class DefaultCreateFeature<T extends {
         /** 字段分组配置（可选，用于将字段分组展示为 Tab） */
         groups?: FieldGroup[];
         /** 自定义表单字段渲染器 */
-        formFieldRenderers?: Record<string, (props: FormFieldRendererProps<T>) => any>;
+        formFieldRenderers?: FormFieldRendererMap<T>;
     });
     getFormAction(): "create";
     getRoutes(): ({
@@ -689,7 +814,7 @@ declare class DefaultDetailFeature<T extends {
         /** 详情显示字段名（可选，不提供则显示 schema 中的所有字段） */
         detailFieldNames?: string[];
         /** 自定义字段渲染函数（可选，key 为字段名，value 为渲染函数） */
-        fieldRenderers?: Record<string, (value: any, item: T) => any>;
+        fieldRenderers?: FieldRendererTypeMap<T>;
         /** 字段分组配置（可选，用于将字段分组展示为卡片） */
         groups?: FieldGroup[];
     });
@@ -703,6 +828,10 @@ declare class DefaultDetailFeature<T extends {
     getActions(context: FeatureContext): Promise<any>;
 }
 
+/**
+ * 默认编辑 Feature
+ */
+
 /**
  * 默认编辑 Feature
  * 类型通过 schema 的 z.infer 推断
@@ -729,8 +858,11 @@ declare class DefaultEditFeature<T extends {
         formFieldNames?: string[];
         /** 字段分组配置（可选，用于将字段分组展示为 Tab） */
         groups?: FieldGroup[];
-        /** 自定义表单字段渲染器 */
-        formFieldRenderers?: Record<string, (props: FormFieldRendererProps<T>) => any>;
+        /** 自定义表单字段渲染器
+         * 使用 satisfies FormFieldRendererMap<T> 来检查 key 约束
+         * 例如：formFieldRenderers: { ... } satisfies FormFieldRendererMap<T>
+         */
+        formFieldRenderers?: FormFieldRendererMap<T>;
     });
     getFormAction(): "edit";
     getRoutes(): ({
@@ -935,17 +1067,213 @@ interface ErrorAlertProps {
  */
 declare function ErrorAlert(props: ErrorAlertProps): hono_jsx_jsx_dev_runtime.JSX.Element;
 
+interface FilterFormProps {
+    /** 筛选字段 */
+    fields: FormField[];
+    /** 列表路径（用于提交筛选表单） */
+    listPath: string;
+    /** 当前筛选参数 */
+    currentFilters?: Record<string, any>;
+}
+/**
+ * 筛选表单组件
+ */
+declare function FilterForm(props: FilterFormProps): hono_jsx_jsx_dev_runtime.JSX.Element | null;
+
+/**
+ * 面包屑组件
+ */
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+}
+/**
+ * 面包屑组件
+ */
+declare function Breadcrumb(props: BreadcrumbProps): hono_jsx_jsx_dev_runtime.JSX.Element | null;
+
+interface HeaderProps {
+    /** 面包屑项 */
+    breadcrumbs?: BreadcrumbItem[];
+    /** 用户信息 */
+    userInfo?: UserInfo | null;
+    /** 退出登录的URL */
+    logoutUrl?: string;
+    /** 页面标题（当没有面包屑时显示） */
+    title?: string;
+}
+/**
+ * 头部组件
+ */
+declare function Header(props: HeaderProps): hono_jsx_jsx_dev_runtime.JSX.Element;
+
 /**
  * 加载条组件
  * 用于显示 HTMX 请求的加载状态
  */
 declare function LoadingBar(): hono_jsx_jsx_dev_runtime.JSX.Element;
 
-interface ObjectEditorProps extends FormFieldRendererProps {
-    /** 对象的 Zod schema（用于自动渲染结构） */
-    objectSchema?: z.ZodObject<any>;
+/**
+ * 表格组件
+ */
+/**
+ * 表格组件 Props
+ */
+interface TableProps<T = any> {
+    /** 数据列表 */
+    items: T[];
+    /** 列定义 */
+    columns: Array<{
+        key: string;
+        label: string;
+        render?: (value: any, item: T) => any;
+    }>;
+    /** 操作列 */
+    actions?: Array<{
+        label: string;
+        href: (item: T) => string;
+        method?: string;
+        class?: string;
+        target?: string;
+    }>;
+    /** 分页信息 */
+    pagination?: {
+        page: number;
+        pageSize: number;
+        total: number;
+        totalPages: number;
+        baseUrl: string;
+        currentParams?: Record<string, string | number | undefined>;
+    };
+    /** 表格标题 */
+    title?: string;
+    /** 表格操作按钮（如导出、清空、刷新等） */
+    tableActions?: Array<{
+        label: string;
+        href?: string;
+        hxGet?: string;
+        hxPost?: string;
+        hxDelete?: string;
+        variant?: "primary" | "secondary" | "danger" | "ghost";
+        hxConfirm?: string;
+    }>;
+    /** 操作列样式（link 或 button） */
+    actionStyle?: "link" | "button";
 }
-declare function ObjectEditor(props: ObjectEditorProps): hono_jsx_jsx_dev_runtime.JSX.Element;
+/**
+ * 表格组件
+ */
+declare function Table<T extends {
+    id: string | number;
+}>(props: TableProps<T>): hono_jsx_jsx_dev_runtime.JSX.Element;
+
+/**
+ * 分页组件
+ */
+interface PaginationProps {
+    /** 当前页码 */
+    page: number;
+    /** 每页数量 */
+    pageSize: number;
+    /** 总记录数 */
+    total: number;
+    /** 总页数 */
+    totalPages: number;
+    /** 基础 URL */
+    baseUrl: string;
+    /** 当前查询参数（用于保留筛选条件等） */
+    currentParams?: Record<string, string | number | undefined>;
+}
+/**
+ * 分页组件
+ */
+declare function Pagination(props: PaginationProps): hono_jsx_jsx_dev_runtime.JSX.Element | null;
+
+/**
+ * 卡片组件
+ */
+interface CardProps {
+    /** 卡片内容 */
+    children: any;
+    /** 卡片标题 */
+    title?: string;
+    /** 自定义类名 */
+    className?: string;
+    /** 是否显示阴影 */
+    shadow?: boolean;
+    /** 是否显示边框 */
+    bordered?: boolean;
+    /** 是否去掉内边距 */
+    noPadding?: boolean;
+}
+/**
+ * 卡片组件
+ */
+declare function Card(props: CardProps): hono_jsx_jsx_dev_runtime.JSX.Element;
+
+/**
+ * 空状态组件
+ */
+interface EmptyStateProps {
+    /** 提示文本 */
+    message?: string;
+    /** 自定义内容 */
+    children?: any;
+}
+/**
+ * 空状态组件
+ */
+declare function EmptyState(props: EmptyStateProps): hono_jsx_jsx_dev_runtime.JSX.Element;
+
+/**
+ * 按钮组件
+ * 只负责样式，其他属性（如 HTMX 属性）通过解构动态传递
+ */
+interface ButtonProps {
+    /** 按钮文本 */
+    children: any;
+    /** 按钮类型 */
+    variant?: "primary" | "secondary" | "danger" | "ghost";
+    /** 按钮大小 */
+    size?: "sm" | "md" | "lg";
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 自定义类名 */
+    className?: string;
+    /** 其他属性（包括 HTMX 属性、href 等） */
+    [key: string]: any;
+}
+/**
+ * 按钮组件
+ * 只负责样式，其他属性通过解构动态传递
+ */
+declare function Button(props: ButtonProps): hono_jsx_jsx_dev_runtime.JSX.Element;
+
+interface PermissionDeniedContentProps {
+    /** 操作ID（权限标识） */
+    operationId?: string;
+    /** 请求路径 */
+    fromPath?: string;
+    /** 错误消息 */
+    message?: string;
+    /** 用户信息 */
+    userInfo?: UserInfo | null;
+    /** 插件选项 */
+    pluginOptions?: HtmxAdminPluginOptions;
+    /** 是否在弹框中显示（用于 HTMX 请求） */
+    isDialog?: boolean;
+}
+/**
+ * 权限提示内容组件（用于弹框或页面）
+ */
+declare function PermissionDeniedContent(props: PermissionDeniedContentProps): hono_jsx_jsx_dev_runtime.JSX.Element;
+/**
+ * 权限提示页面组件（完整页面，用于整页加载）
+ */
+declare function PermissionDeniedPage(props: PermissionDeniedContentProps): hono_jsx_jsx_dev_runtime.JSX.Element;
 
 interface StringArrayEditorProps extends FormFieldRendererProps {
     /** 占位符文本（可选） */
@@ -973,6 +1301,12 @@ interface TagsEditorProps extends FormFieldRendererProps {
  */
 declare function TagsEditor(props: TagsEditorProps): hono_jsx_jsx_dev_runtime.JSX.Element;
 
+interface ObjectEditorProps extends FormFieldRendererProps {
+    /** 对象的 Zod schema（用于自动渲染结构） */
+    objectSchema?: z.ZodObject<any>;
+}
+declare function ObjectEditor(props: ObjectEditorProps): hono_jsx_jsx_dev_runtime.JSX.Element;
+
 /**
  * 可拖拽排序列表组件
  * 使用 HTML5 原生拖放 API 实现拖拽排序
@@ -1010,4 +1344,4 @@ interface SortableListProps {
  */
 declare function SortableList(props: SortableListProps): hono_jsx_jsx_dev_runtime.JSX.Element;
 
-export { type AuthProvider, BaseFeature, CustomFeature, DefaultCreateFeature, DefaultDeleteFeature, DefaultDetailFeature, DefaultEditFeature, DefaultListFeature, Dialog, type DialogProps, type DialogSize, ErrorAlert, type ErrorAlertProps, type Feature, type FeatureContext, type FeatureType, type FieldMetadata, HtmxAdminPlugin, type HtmxAdminPluginOptions, type ListParams, type ListResult, LoadingBar, type NavItemConfig, type Notification, type NotificationType, ObjectEditor, type ObjectEditorProps, type PageMetadata, PageModel, type PermissionResult, SortableList, StringArrayEditor, type StringArrayEditorProps, TagsEditor, type TagsEditorProps, type UserInfo, checkUserPermission, getUserInfo, modelNameToPath, parseListParams };
+export { type ActionButton, type AuthProvider, BaseFeature, BaseFormFeature, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, type CardProps, CustomFeature, DefaultCreateFeature, DefaultDeleteFeature, DefaultDetailFeature, DefaultEditFeature, DefaultListFeature, Dialog, type DialogProps, type DialogSize, EmptyState, type EmptyStateProps, ErrorAlert, type ErrorAlertProps, type Feature, type FeatureContext, type FeatureType, type FieldGroup, type FieldMetadata, type FieldRenderer, type FieldRendererProps, type FieldRendererType, type FieldRendererTypeMap, FilterForm, type FormAction, type FormField, type FormFieldRenderer, type FormFieldRendererMap, type FormFieldRendererProps, Header, type HeaderProps, HtmxAdminPlugin, type HtmxAdminPluginOptions, type ListParams, type ListResult, LoadingBar, type ModelField, type NavItemConfig, type Notification, type NotificationType$1 as NotificationType, ObjectEditor, type ObjectEditorProps, type OpenMode, type PageMetadata, PageModel, Pagination, type PaginationProps, PermissionDeniedContent, type PermissionDeniedContentProps, PermissionDeniedPage, type PermissionResult, type ResolvedHtmxAdminPluginOptions, SortableList, type SortableListProps, StringArrayEditor, type StringArrayEditorProps, Table, type TableProps, TagsEditor, type TagsEditorProps, type UserInfo, checkUserPermission, getUserInfo, modelNameToPath, parseListParams };

package/dist/index.js

@@ -549,8 +549,9 @@ function renderFormField(field, initialData, formFieldRenderers) {
           /* @__PURE__ */ jsxRuntime.jsx("div", { children: customRenderer({
             field,
             value: parsedValue,
-            item: initialData,
-            name: field.name
+            item: initialData || {},
+            name: field.name,
+            label: field.label
           }) }),
           field.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 mt-1", children: field.description })
         ]
@@ -1847,7 +1848,12 @@ function renderDefaultValue(value) {
 function renderField(field, value, item) {
   let content;
   if (field.render) {
-    const rendered = field.render(value, item);
+    const rendered = field.render({
+      value,
+      item,
+      name: field.key,
+      label: field.label
+    });
     if (rendered === null || rendered === void 0) {
       content = /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: "-" });
     } else if (typeof rendered === "string" || typeof rendered === "number" || typeof rendered === "boolean") {
@@ -1983,11 +1989,14 @@ var DefaultDetailFeature = class extends BaseFeature {
       const groupFields = groupSchemas.map(
         ({ label, schema: schema2, fields: fieldNames }) => {
           const groupFields2 = parseSchemaToFields(schema2);
-          const detailFields2 = groupFields2.map((field) => ({
-            key: field.name,
-            label: field.label,
-            render: this.fieldRenderers?.[field.name]
-          }));
+          const detailFields2 = groupFields2.map((field) => {
+            const renderer = this.fieldRenderers?.[field.name];
+            return {
+              key: field.name,
+              label: field.label,
+              render: renderer
+            };
+          });
           return {
             label,
             fields: detailFields2,
@@ -2019,12 +2028,16 @@ var DefaultDetailFeature = class extends BaseFeature {
       }
     }
     const detailFieldNames = getFieldNamesFromFields(detailFields);
-    const fields = detailFieldNames.map((fieldName) => ({
-      key: fieldName,
-      label: getFieldLabelFromFields(this.fields || [], fieldName) || fieldName,
-      render: this.fieldRenderers?.[fieldName]
-      // 如果有自定义渲染函数则使用
-    }));
+    const fields = detailFieldNames.map((fieldName) => {
+      const label = getFieldLabelFromFields(this.fields || [], fieldName) || fieldName;
+      const renderer = this.fieldRenderers?.[fieldName];
+      return {
+        key: fieldName,
+        label,
+        // 直接使用统一的渲染器类型
+        render: renderer
+      };
+    });
     return /* @__PURE__ */ jsxRuntime.jsx(DetailPage, { item, fields });
   }
   async getActions(context) {
@@ -3809,11 +3822,11 @@ function SortableList(props) {
 function StringArrayEditor(props) {
   const {
     value,
-    name,
     placeholder = "\u8BF7\u8F93\u5165\u5185\u5BB9",
     allowEmpty = false,
     rows = 1
   } = props;
+  const name = props.name;
   const initialItems = value || [];
   const initialDataJson = JSON.stringify({
     items: initialItems.map((item) => item || ""),
@@ -3980,7 +3993,8 @@ function ArrayItem({
   ] });
 }
 function TagsEditor(props) {
-  const { value, name, placeholder = "\u8F93\u5165\u6807\u7B7E\u540E\u6309\u56DE\u8F66\u6DFB\u52A0" } = props;
+  const { value, placeholder = "\u8F93\u5165\u6807\u7B7E\u540E\u6309\u56DE\u8F66\u6DFB\u52A0" } = props;
+  const name = props.name;
   const initialTags = value || [];
   const initialDataJson = JSON.stringify({
     tags: initialTags.map((tag) => tag || ""),
@@ -4264,7 +4278,7 @@ function ObjectEditor(props) {
   const initialValueJson = JSON.stringify(initialObject);
   JSON.stringify(fields.map((f) => f.name));
   const generateField = (field) => {
-    const fieldId = `${name}-${field.name}`;
+    const fieldId = `${String(name)}-${field.name}`;
     const fieldValue = initialObject[field.name];
     const fieldValueStr = fieldValue === void 0 || fieldValue === null ? "" : typeof fieldValue === "object" ? JSON.stringify(fieldValue) : String(fieldValue);
     const requiredAttr = field.required ? "required" : "";
@@ -5334,6 +5348,10 @@ var HtmxAdminPlugin = class {
 };
 
 exports.BaseFeature = BaseFeature;
+exports.BaseFormFeature = BaseFormFeature;
+exports.Breadcrumb = Breadcrumb;
+exports.Button = Button;
+exports.Card = Card;
 exports.CustomFeature = CustomFeature;
 exports.DefaultCreateFeature = DefaultCreateFeature;
 exports.DefaultDeleteFeature = DefaultDeleteFeature;
@@ -5341,13 +5359,20 @@ exports.DefaultDetailFeature = DefaultDetailFeature;
 exports.DefaultEditFeature = DefaultEditFeature;
 exports.DefaultListFeature = DefaultListFeature;
 exports.Dialog = Dialog;
+exports.EmptyState = EmptyState;
 exports.ErrorAlert = ErrorAlert;
+exports.FilterForm = FilterForm;
+exports.Header = Header;
 exports.HtmxAdminPlugin = HtmxAdminPlugin;
 exports.LoadingBar = LoadingBar;
 exports.ObjectEditor = ObjectEditor;
 exports.PageModel = PageModel;
+exports.Pagination = Pagination;
+exports.PermissionDeniedContent = PermissionDeniedContent;
+exports.PermissionDeniedPage = PermissionDeniedPage;
 exports.SortableList = SortableList;
 exports.StringArrayEditor = StringArrayEditor;
+exports.Table = Table;
 exports.TagsEditor = TagsEditor;
 exports.checkUserPermission = checkUserPermission;
 exports.getUserInfo = getUserInfo;

package/dist/index.mjs

@@ -547,8 +547,9 @@ function renderFormField(field, initialData, formFieldRenderers) {
           /* @__PURE__ */ jsx("div", { children: customRenderer({
             field,
             value: parsedValue,
-            item: initialData,
-            name: field.name
+            item: initialData || {},
+            name: field.name,
+            label: field.label
           }) }),
           field.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-1", children: field.description })
         ]
@@ -1845,7 +1846,12 @@ function renderDefaultValue(value) {
 function renderField(field, value, item) {
   let content;
   if (field.render) {
-    const rendered = field.render(value, item);
+    const rendered = field.render({
+      value,
+      item,
+      name: field.key,
+      label: field.label
+    });
     if (rendered === null || rendered === void 0) {
       content = /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "-" });
     } else if (typeof rendered === "string" || typeof rendered === "number" || typeof rendered === "boolean") {
@@ -1981,11 +1987,14 @@ var DefaultDetailFeature = class extends BaseFeature {
       const groupFields = groupSchemas.map(
         ({ label, schema: schema2, fields: fieldNames }) => {
           const groupFields2 = parseSchemaToFields(schema2);
-          const detailFields2 = groupFields2.map((field) => ({
-            key: field.name,
-            label: field.label,
-            render: this.fieldRenderers?.[field.name]
-          }));
+          const detailFields2 = groupFields2.map((field) => {
+            const renderer = this.fieldRenderers?.[field.name];
+            return {
+              key: field.name,
+              label: field.label,
+              render: renderer
+            };
+          });
           return {
             label,
             fields: detailFields2,
@@ -2017,12 +2026,16 @@ var DefaultDetailFeature = class extends BaseFeature {
       }
     }
     const detailFieldNames = getFieldNamesFromFields(detailFields);
-    const fields = detailFieldNames.map((fieldName) => ({
-      key: fieldName,
-      label: getFieldLabelFromFields(this.fields || [], fieldName) || fieldName,
-      render: this.fieldRenderers?.[fieldName]
-      // 如果有自定义渲染函数则使用
-    }));
+    const fields = detailFieldNames.map((fieldName) => {
+      const label = getFieldLabelFromFields(this.fields || [], fieldName) || fieldName;
+      const renderer = this.fieldRenderers?.[fieldName];
+      return {
+        key: fieldName,
+        label,
+        // 直接使用统一的渲染器类型
+        render: renderer
+      };
+    });
     return /* @__PURE__ */ jsx(DetailPage, { item, fields });
   }
   async getActions(context) {
@@ -3807,11 +3820,11 @@ function SortableList(props) {
 function StringArrayEditor(props) {
   const {
     value,
-    name,
     placeholder = "\u8BF7\u8F93\u5165\u5185\u5BB9",
     allowEmpty = false,
     rows = 1
   } = props;
+  const name = props.name;
   const initialItems = value || [];
   const initialDataJson = JSON.stringify({
     items: initialItems.map((item) => item || ""),
@@ -3978,7 +3991,8 @@ function ArrayItem({
   ] });
 }
 function TagsEditor(props) {
-  const { value, name, placeholder = "\u8F93\u5165\u6807\u7B7E\u540E\u6309\u56DE\u8F66\u6DFB\u52A0" } = props;
+  const { value, placeholder = "\u8F93\u5165\u6807\u7B7E\u540E\u6309\u56DE\u8F66\u6DFB\u52A0" } = props;
+  const name = props.name;
   const initialTags = value || [];
   const initialDataJson = JSON.stringify({
     tags: initialTags.map((tag) => tag || ""),
@@ -4262,7 +4276,7 @@ function ObjectEditor(props) {
   const initialValueJson = JSON.stringify(initialObject);
   JSON.stringify(fields.map((f) => f.name));
   const generateField = (field) => {
-    const fieldId = `${name}-${field.name}`;
+    const fieldId = `${String(name)}-${field.name}`;
     const fieldValue = initialObject[field.name];
     const fieldValueStr = fieldValue === void 0 || fieldValue === null ? "" : typeof fieldValue === "object" ? JSON.stringify(fieldValue) : String(fieldValue);
     const requiredAttr = field.required ? "required" : "";
@@ -5331,4 +5345,4 @@ var HtmxAdminPlugin = class {
   }
 };
 
-export { BaseFeature, CustomFeature, DefaultCreateFeature, DefaultDeleteFeature, DefaultDetailFeature, DefaultEditFeature, DefaultListFeature, Dialog, ErrorAlert, HtmxAdminPlugin, LoadingBar, ObjectEditor, PageModel, SortableList, StringArrayEditor, TagsEditor, checkUserPermission, getUserInfo, modelNameToPath, parseListParams };
+export { BaseFeature, BaseFormFeature, Breadcrumb, Button, Card, CustomFeature, DefaultCreateFeature, DefaultDeleteFeature, DefaultDetailFeature, DefaultEditFeature, DefaultListFeature, Dialog, EmptyState, ErrorAlert, FilterForm, Header, HtmxAdminPlugin, LoadingBar, ObjectEditor, PageModel, Pagination, PermissionDeniedContent, PermissionDeniedPage, SortableList, StringArrayEditor, Table, TagsEditor, checkUserPermission, getUserInfo, modelNameToPath, parseListParams };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imean-service-engine-htmx-plugin",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "HtmxAdminPlugin for IMean Service Engine",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",