diff --git a/package.json b/package.json
index 3e682fe..b4d64ef 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kne-components/components-admin",
-  "version": "1.1.36",
+  "version": "1.1.37",
   "description": "用于实现一个后台管理系统的必要组件",
   "scripts": {
     "init": "husky",
diff --git "a/prompts/FormInfo\344\275\277\347\224\250\346\214\207\345\215\227.md" "b/prompts/FormInfo\344\275\277\347\224\250\346\214\207\345\215\227.md"
deleted file mode 100644
index 6f109e2..0000000
--- "a/prompts/FormInfo\344\275\277\347\224\250\346\214\207\345\215\227.md"
+++ /dev/null
@@ -1,1110 +0,0 @@
-# FormInfo 组件完整使用指南
-
-## 目录
-
-1. [概述](#一概述)
-2. [导入方式](#二导入方式)
-3. [核心组件](#三核心组件)
-4. [字段类型](#四字段类型)
-5. [校验规则](#五校验规则)
-6. [列表组件](#六列表组件)
-7. [弹窗与抽屉](#七弹窗与抽屉)
-8. [分步表单](#八分步表单)
-9. [表单上下文与API](#九表单上下文与api)
-10. [多语言支持](#十多语言支持)
-11. [最佳实践](#十一最佳实践)
-
----
-
-## 一、概述
-
-FormInfo 是一个基于 React 和 Ant Design 的企业级表单组件库，提供了完整的表单状态管理、验证和提交解决方案。
-
-### 核心特性
-
-- **状态管理**: 使用 React 状态管理机制管理表单状态
-- **事件系统**: 使用事件发射器模式实现表单内部通信
-- **字段管理**: 动态添加、更新和移除表单字段
-- **验证系统**: 支持表单和字段级别的验证，内置丰富校验规则
-- **拦截器**: 提供表单操作的拦截和修改能力
-- **国际化**: 内置中英文语言支持
-
----
-
-## 二、导入方式
-
-### 1. 使用 createWithRemoteLoader（推荐）
-
-```jsx
-import { createWithRemoteLoader } from '@kne/remote-loader';
-
-const FormComponent = createWithRemoteLoader({
-  modules: ['components-core:FormInfo']
-})(({ remoteModules }) => {
-  const [FormInfo] = remoteModules;
-  // 解构需要的组件
-  const { Form, SubmitButton, fields } = FormInfo;
-  const { Input, TextArea, Select } = fields;
-
-  return (
-    <Form onSubmit={(data) => console.log(data)}>
-      <FormInfo list={[
-        <Input name="name" label="姓名" rule="REQ" />
-      ]} />
-      <SubmitButton>提交</SubmitButton>
-    </Form>
-  );
-});
-
-export default FormComponent;
-```
-
-### 2. 可用的 FormInfo 导出
-
-| 导出 | 说明 |
-|-----|-----|
-| `FormInfo` | 表单信息组件（布局） |
-| `Form` | 表单容器组件 |
-| `SubmitButton` | 提交按钮 |
-| `CancelButton` | 取消按钮 |
-| `fields` | 字段组件集合 |
-| `List` | 卡片式列表组件 |
-| `TableList` | 表格列表组件 |
-| `MultiField` | 多字段组件 |
-| `FormModal` | 模态框表单组件 |
-| `FormDrawer` | 抽屉表单组件 |
-| `FormSteps` | 步骤表单组件 |
-| `FormStepModal` | 模态框步骤表单 |
-| `useFormModal` | 表单弹窗 Hook |
-| `useFormDrawer` | 抽屉表单 Hook |
-| `useFormStepModal` | 步骤表单弹窗 Hook |
-| `useFormContext` | 表单上下文 Hook |
-| `FormApiButton` | 表单 API 操作按钮 |
-
----
-
-## 三、核心组件
-
-### 1. Form 组件
-
-表单容器组件，负责状态管理和上下文提供。
-
-```jsx
-<Form
-  data={{}}                    // 初始数据对象
-  onSubmit={(data) => {}}       // 提交成功回调
-  onError={(errors) => {}}     // 校验失败回调
-  onPrevSubmit={(data) => {}}   // 点击提交时触发（可返回 false 阻止）
-  rules={{}}                    // 自定义校验规则
-  lang={[]}                     // 多语言配置
-  size="large"                  // 表单尺寸
-  debug                         // 开启调试模式
->
-  {/* 表单内容 */}
-</Form>
-```
-
-**API:**
-
-| 属性 | 说明 | 类型 | 默认值 |
-|-----|-----|-----|-----|
-| data | 初始数据 | object | {} |
-| onSubmit | 提交成功回调 | function(data, form) | - |
-| onError | 校验失败回调 | function(errors, form) | - |
-| onPrevSubmit | 提交前拦截回调 | function(data) | - |
-| rules | 自定义校验规则 | object | {} |
-| lang | 多语言配置 | array | - |
-| size | 表单尺寸 | string | - |
-| debug | 开启调试 | boolean | false |
-
-### 2. FormInfo 组件
-
-表单字段分组和布局组件。
-
-```jsx
-<FormInfo
-  title="基本信息"          // 分组标题
-  subtitle="请填写..."       // 副标题
-  column={2}                // 列数
-  gap={24}                  // 字段间距
-  list={[                   // 字段数组
-    <Input name="name" label="姓名" rule="REQ" />
-  ]}
-  bordered                  // 是否显示边框
-  block                     // 占满整行
->
-```
-
-**API:**
-
-| 属性 | 说明 | 类型 | 默认值 |
-|-----|-----|-----|-----|
-| title | 分组标题 | string \| ReactNode | - |
-| subtitle | 副标题 | string \| ReactNode | - |
-| column | 列数 | number \| object | 2 |
-| gap | 字段间距 | number | 24 |
-| list | 字段列表 | ReactNode[] | [] |
-| bordered | 显示边框 | boolean | false |
-| block | 占满整行 | boolean | false |
-
----
-
-## 四、字段类型
-
-### 1. 基础输入类
-
-```jsx
-const { Input, InputNumber, TextArea, Password } = fields;
-
-// 普通输入框
-<Input name="username" label="用户名" rule="REQ LEN-4-16" placeholder="请输入用户名" />
-
-// 密码输入框
-<Password name="password" label="密码" rule="REQ LEN-8-20" />
-
-// 数字输入框
-<InputNumber name="age" label="年龄" min={0} max={120} />
-
-// 文本域
-<TextArea name="description" label="描述" rows={4} block />
-
-// 大写输入框
-<InputUpperCase name="code" label="编码" rule="REQ" />
-```
-
-### 2. 选择器类
-
-```jsx
-const { Select, RadioGroup, CheckboxGroup, Switch, Rate, Slider } = fields;
-
-// 下拉选择
-<Select
-  name="type"
-  label="类型"
-  rule="REQ"
-  options={[
-    { label: "选项1", value: "1" },
-    { label: "选项2", value: "2" }
-  ]}
-/>
-
-// 单选组
-<RadioGroup
-  name="gender"
-  label="性别"
-  options={[
-    { label: "男", value: "male" },
-    { label: "女", value: "female" }
-  ]}
-  defaultValue="male"
-/>
-
-// 复选框组
-<CheckboxGroup
-  name="hobbies"
-  label="爱好"
-  options={[
-    { label: "篮球", value: "basketball" },
-    { label: "足球", value: "football" }
-  ]}
-/>
-
-// 开关
-<Switch name="enabled" label="启用" />
-
-// 评分
-<Rate name="rating" label="满意度" />
-
-// 滑动条
-<Slider name="progress" label="进度" />
-```
-
-### 3. 高级选择器
-
-```jsx
-const { AdvancedSelect, SuperSelect, SuperSelectTableList, SuperSelectUser, SuperSelectTree } = fields;
-
-// 高级选择器（远程加载）
-<AdvancedSelect
-  name="user"
-  label="选择用户"
-  rule="REQ"
-  api={{
-    loader: () => ({
-      pageData: [
-        { id: 1, name: "张三" },
-        { id: 2, name: "李四" }
-      ]
-    })
-  }}
-  nameKey="id"
-  labelKey="name"
-/>
-
-// 超级选择器
-<SuperSelect
-  name="department"
-  label="部门"
-  options={[
-    { label: "技术部", value: "tech" },
-    { label: "产品部", value: "product" }
-  ]}
-  single  // 单选模式
-/>
-
-// 表格选择器
-<SuperSelectTableList
-  name="items"
-  label="选择项目"
-  columns={[
-    { title: "名称", dataIndex: "name" },
-    { title: "描述", dataIndex: "desc" }
-  ]}
-  api={{ loader: () => ({ pageData: [...] }) }}
-/>
-
-// 用户选择器
-<SuperSelectUser
-  name="manager"
-  label="负责人"
-/>
-
-// 树形选择器
-<SuperSelectTree
-  name="category"
-  label="分类"
-  treeData={[{
-    title: "根节点",
-    value: "root",
-    children: [...]
-  }]}
-/>
-```
-
-### 4. 日期时间类
-
-```jsx
-const { DatePicker, DateRangePicker, TimePicker, TimeRangePicker, DatePickerToday, MonthPicker, WeekPicker } = fields;
-
-// 日期选择
-<DatePicker
-  name="birthday"
-  label="出生日期"
-  disabledDate={current => current && current < dayjs().startOf('day')}  // 禁止选择过去日期
-/>
-
-// 日期范围
-<DateRangePicker
-  name="period"
-  label="时间段"
-/>
-
-// 今日起止（包含"至今"选项）
-<DatePickerToday
-  name="workPeriod"
-  label="工作经历"
-/>
-
-// 月份选择
-<MonthPicker name="month" label="月份" />
-
-// 周选择
-<WeekPicker name="week" label="周" />
-
-// 时间选择
-<TimePicker name="time" label="时间" />
-
-// 时间范围
-<TimeRangePicker name="timeRange" label="时间范围" />
-```
-
-### 5. 业务专用类
-
-```jsx
-const { PhoneNumber, MoneyInput, SalaryInput, AddressSelect, AddressInput, FunctionSelect, IndustrySelect } = fields;
-
-// 手机号
-<PhoneNumber
-  name="phone"
-  label="手机号"
-  rule="REQ"
-  format="string"  // 返回字符串格式
-/>
-
-// 金额输入
-<MoneyInput
-  name="amount"
-  label="金额"
-  precision={2}  // 精度
-  prefix="¥"   // 前缀
-/>
-
-// 薪资输入
-<SalaryInput
-  name="salary"
-  label="薪资"
-/>
-
-// 地址选择
-<AddressSelect
-  name="address"
-  label="地址"
-  level={3}  // 选择级别数
-/>
-
-// 地址输入
-<AddressInput
-  name="detailAddress"
-  label="详细地址"
-/>
-
-// 职能选择
-<FunctionSelect
-  name="function"
-  label="职能"
-/>
-
-// 行业选择
-<IndustrySelect
-  name="industry"
-  label="行业"
-/>
-```
-
-### 6. 上传类
-
-```jsx
-const { Upload, Avatar, Signature } = fields;
-
-// 文件上传
-<Upload
-  name="file"
-  label="文件"
-  block
-  maxLength={1}
-  accept={['.xls', '.xlsx']}
-  multiple={false}
-  interceptor="photo-string-list"  // 转换为字符串列表
-/>
-
-// 头像上传
-<Avatar
-  name="avatar"
-  label="头像"
-  shape="circle"
-/>
-
-// 签名
-<Signature
-  name="signature"
-  label="签名"
-/>
-```
-
-### 7. 其他
-
-```jsx
-const { Cascader, ColorPicker, TreeSelect, TypeDateRangePicker } = fields;
-
-// 级联选择
-<Cascader
-  name="location"
-  label="地区"
-  options={[{
-    value: 'zhejiang',
-    label: '浙江',
-    children: [{
-      value: 'hangzhou',
-      label: '杭州'
-    }]
-  }]}
-/>
-
-// 颜色选择
-<ColorPicker
-  name="color"
-  label="颜色"
-/>
-
-// 树形选择
-<TreeSelect
-  name="tree"
-  label="树形选择"
-  treeData={[{
-    title: 'Node1',
-    value: '0-0',
-    children: [{
-      title: 'Child Node1',
-      value: '0-0-1'
-    }]
-  }]}
-/>
-
-// 带类型的日期范围
-<TypeDateRangePicker
-  name="dateRange"
-  label="日期范围"
-/>
-```
-
----
-
-## 五、校验规则
-
-### 1. 内置规则
-
-| 规则 | 说明 | 示例 |
-|-----|-----|-----|
-| `REQ` | 必填 | `rule="REQ"` |
-| `EMAIL` | 邮箱格式 | `rule="EMAIL"` |
-| `TEL` | 电话格式 | `rule="TEL"` |
-| `PHONE` | 手机号格式 | `rule="PHONE"` |
-| `NUM` | 数字 | `rule="NUM"` |
-| `INT` | 整数 | `rule="INT"` |
-| `ID_CARD` | 身份证号 | `rule="ID_CARD"` |
-| `LEN-最小-最大` | 长度限制 | `rule="LEN-3-10"` |
-| `LEN-0-最大` | 最大长度 | `rule="LEN-0-500"` |
-
-### 2. 组合使用
-
-```jsx
-<Input name="email" label="邮箱" rule="REQ EMAIL" />
-<Input name="username" label="用户名" rule="REQ LEN-4-16" />
-<Input name="content" label="内容" rule="LEN-0-1000" />
-```
-
-### 3. 自定义规则
-
-```jsx
-<Form
-  rules={{
-    PASSWORD_STRENGTH: (value) => {
-      const hasLetter = /[a-zA-Z]/.test(value);
-      const hasNumber = /[0-9]/.test(value);
-      return {
-        result: hasLetter && hasNumber,
-        errMsg: "密码必须包含字母和数字"
-      };
-    },
-    REMOTE_RULE: async (value) => {
-      // 异步校验
-      const res = await checkValue(value);
-      return { result: res };
-    }
-  }}
->
-  <Input name="password" label="密码" rule="REQ PASSWORD_STRENGTH" />
-</Form>
-```
-
-### 4. 字段通用属性
-
-```jsx
-<Input
-  name="name"
-  label="姓名"
-  rule="REQ LEN-2-20"
-  tips="请输入真实姓名"
-  value="默认值"
-  defaultValue="默认值"
-  disabled
-  readOnly
-  labelHidden
-  block
-  placeholder="请输入"
-  display={({ formData }) => formData.type === 'vip'}  // 条件显示
-  onChange={(value, { formData }) => console.log(value)}
-/>
-```
-
----
-
-## 六、列表组件
-
-### 1. List（卡片式列表）
-
-```jsx
-import { List } from '@components/FormInfo';
-
-<List
-  name="experiences"
-  title="工作经历"
-  itemTitle={({ index, data }) => data?.companyName || `经历 ${index + 1}`}
-  maxLength={5}
-  minLength={1}
-  important  // 重要样式
-  addText="添加经历"
-  removeText="删除"
-  list={[
-    <Input name="company" label="公司名称" rule="REQ" />,
-    <Input name="position" label="职位" rule="REQ" />,
-    <DateRangePicker name="period" label="在职时间" />,
-    <TextArea name="description" label="工作描述" block />
-  ]}
-/>
-```
-
-**API:**
-
-| 属性 | 说明 | 类型 | 默认值 |
-|-----|-----|-----|-----|
-| name | 字段名 | string | - |
-| title | 列表标题 | string \| ReactNode | - |
-| itemTitle | 项标题渲染 | function | - |
-| list | 字段列表 | ReactNode[] | - |
-| maxLength | 最大条数 | number | - |
-| minLength | 最小条数 | number | - |
-| important | 重要样式 | boolean | false |
-| addText | 添加按钮文本 | string | 添加 |
-| removeText | 删除按钮文本 | string | 删除 |
-
-### 2. TableList（表格列表）
-
-```jsx
-import { TableList } from '@components/FormInfo';
-
-<TableList
-  name="items"
-  title="明细列表"
-  maxLength={10}
-  addText="添加"
-  removeText="删除"
-  list={[
-    <Input name="name" label="名称" rule="REQ" />,
-    <InputNumber name="quantity" label="数量" rule="REQ" />,
-    <MoneyInput name="price" label="单价" rule="REQ" />
-  ]}
-/>
-```
-
-### 3. MultiField（多字段）
-
-```jsx
-import { MultiField } from '@components/FormInfo';
-
-<MultiField
-  name="certificates"
-  label="职业证书"
-  field={Input}
-  block
-  addText="添加证书"
-  placeholder="请输入证书名称"
-/>
-```
-
-### 4. 嵌套列表
-
-```jsx
-<List
-  name="projects"
-  title="项目列表"
-  list={[
-    <Input name="projectName" label="项目名称" rule="REQ" />,
-    <TableList
-      name="tasks"
-      title="任务列表"
-      block
-      list={[
-        <Input name="taskName" label="任务名称" rule="REQ" />,
-        <DatePicker name="deadline" label="截止日期" />
-      ]}
-    />
-  ]}
-/>
-```
-
----
-
-## 七、弹窗与抽屉
-
-### 1. useFormModal（表单弹窗 Hook）
-
-```jsx
-import { createWithRemoteLoader } from '@kne/remote-loader';
-
-const Component = createWithRemoteLoader({
-  modules: ['components-core:FormInfo@useFormModal']
-})(({ remoteModules }) => {
-  const [useFormModal] = remoteModules;
-  const formModal = useFormModal();
-
-  return (
-    <Button onClick={() => {
-      formModal({
-        title: "编辑项目",
-        size: "large",
-        autoClose: true,  // 提交成功后自动关闭
-        width: 800,
-        formProps: {
-          data: { field1: "默认值" },
-          onSubmit: async (data) => {
-            console.log(data);
-            // return false 可以阻止关闭弹窗
-          }
-        },
-        children: <FormInner />
-      });
-    }}>
-      打开表单
-    </Button>
-  );
-});
-```
-
-### 2. useFormDrawer（抽屉表单 Hook）
-
-```jsx
-import { createWithRemoteLoader } from '@kne/remote-loader';
-
-const Component = createWithRemoteLoader({
-  modules: ['components-core:FormInfo@useFormDrawer']
-})(({ remoteModules }) => {
-  const [useFormDrawer] = remoteModules;
-  const formDrawer = useFormDrawer();
-
-  return (
-    <Button onClick={() => {
-      formDrawer({
-        title: "编辑",
-        width: 600,
-        formProps: {
-          data: { name: "初始值" },
-          onSubmit: (data) => console.log(data)
-        },
-        children: <FormInner />
-      });
-    }}>
-      打开抽屉
-    </Button>
-  );
-});
-```
-
-### 3. FormModal 组件
-
-```jsx
-import { FormModal, FormInfo, Input } from '@components/FormInfo';
-
-<FormModal
-  title="编辑信息"
-  open={open}
-  onCancel={() => onOpenChange(false)}
-  formProps={{
-    data: initialData,
-    onSubmit: handleSubmit
-  }}
-  autoClose={true}
-  okText="保存"
-  cancelText="取消"
-  width={800}
->
-  <FormInfo
-    title="基本信息"
-    column={2}
-    list={[
-      <Input name="name" label="姓名" rule="REQ" />,
-      <Input name="email" label="邮箱" rule="EMAIL" />
-    ]}
-  />
-</FormModal>
-```
-
-### 4. FormDrawer 组件
-
-```jsx
-import { FormDrawer, FormInfo, Input } from '@components/FormInfo';
-
-<FormDrawer
-  title="编辑信息"
-  open={open}
-  onClose={() => onOpenChange(false)}
-  width={600}
-  formProps={{
-    data: initialData,
-    onSubmit: handleSubmit
-  }}
->
-  <FormInfo
-    list={[
-      <Input name="name" label="姓名" rule="REQ" />
-    ]}
-  />
-</FormDrawer>
-```
-
----
-
-## 八、分步表单
-
-### 1. FormSteps（步骤表单）
-
-```jsx
-import { FormSteps, FormInfo, Input, SubmitButton, CancelButton } from '@components/FormInfo';
-
-<FormSteps
-  items={[
-    {
-      title: '基本信息',
-      formProps: { data: formData },
-      children: (
-        <FormInfo
-          title="个人资料"
-          column={2}
-          list={[
-            <Input name="name" label="姓名" rule="REQ" />,
-            <Input name="email" label="邮箱" rule="REQ EMAIL" />
-          ]}
-        />
-      )
-    },
-    {
-      title: '详细信息',
-      formProps: { data: formData },
-      children: (
-        <FormInfo
-          list={[
-            <Input name="company" label="公司" rule="REQ" />
-          ]}
-        />
-      )
-    }
-  ]}
-  autoStep={true}
-  onComplete={handleComplete}
-  onChange={(current, data) => console.log(current, data)}
-/>
-```
-
-**API:**
-
-| 属性 | 说明 | 类型 | 默认值 |
-|-----|-----|-----|-----|
-| items | 步骤配置项 | array | [] |
-| autoStep | 自动切换下一步 | boolean | true |
-| orientation | 步骤条方向 | horizontal \| vertical | horizontal |
-| onChange | 步骤切换回调 | function | - |
-| onComplete | 完成回调 | function | - |
-
-### 2. FormStepsModal（模态框步骤表单）
-
-```jsx
-import { FormStepsModal, FormInfo, Input } from '@components/FormInfo';
-
-<FormStepsModal
-  modalProps={{
-    open,
-    title: '分步表单',
-    onCancel: () => onOpenChange(false),
-    width: 900
-  }}
-  items={[...]}  // 同 FormSteps items
-  autoStep={true}
-  completeText="提交"
-  nextText="下一步"
-  onComplete={handleComplete}
-/>
-```
-
-### 3. useFormStepModal（Hook 方式）
-
-```jsx
-import { createWithRemoteLoader } from '@kne/remote-loader';
-
-const Component = createWithRemoteLoader({
-  modules: ['components-core:FormInfo@useFormStepModal']
-})(({ remoteModules }) => {
-  const [useFormStepModal] = remoteModules;
-  const stepModal = useFormStepModal();
-
-  return (
-    <Button onClick={() => {
-      stepModal({
-        title: "分步表单",
-        items: [...]
-      });
-    }}>
-      打开分步表单
-    </Button>
-  );
-});
-```
-
----
-
-## 九、表单上下文与API
-
-### 1. useFormContext
-
-```jsx
-import { useFormContext } from '@components/FormInfo';
-
-const FormActions = () => {
-  const { openApi, formData } = useFormContext();
-
-  return (
-    <>
-      <Button onClick={() => {
-        openApi.setFields([
-          { name: "name", value: "张三" },
-          { name: "email", value: "test@example.com" }
-        ]);
-      }}>
-        填充数据
-      </Button>
-
-      <Button onClick={() => openApi.validateAll()}>
-        校验表单
-      </Button>
-
-      <Button onClick={() => openApi.reset()}>
-        重置表单
-      </Button>
-
-      <Button onClick={() => console.log(formData)}>
-        查看数据
-      </Button>
-    </>
-  );
-};
-```
-
-### 2. openApi 方法
-
-| 方法 | 说明 | 参数 |
-|-----|-----|-----|
-| getFormData() | 获取表单数据 | - |
-| getValue(name) | 获取字段值 | name |
-| setField({ name, value }) | 设置单个字段 | name, value |
-| setFields([...]) | 设置多个字段 | array |
-| setFormData(data) | 设置整个表单 | object |
-| validateAll() | 校验所有字段 | - |
-| validate(name) | 校验单个字段 | name |
-| reset() | 重置表单 | - |
-| getFieldError(name) | 获取错误信息 | name |
-
-### 3. FormApiButton
-
-```jsx
-import { FormApiButton } from '@components/FormInfo';
-
-<FormApiButton
-  onClick={({ openApi, formData }) => {
-    console.log("当前数据:", formData);
-    openApi.setFields([
-      { name: "name", value: "新值" }
-    ]);
-  }}
->
-  操作表单
-</FormApiButton>
-```
-
-### 4. 字段关联（associations）
-
-```jsx
-<Input name="firstName" label="名" rule="REQ" />
-<Input name="familyName" label="姓" rule="REQ" />
-<Input
-  name="fullName"
-  label="全名"
-  rule="REQ"
-  associations={{
-    fields: [{ name: 'firstName' }, { name: 'familyName' }],
-    callback: ({ target, openApi }) => {
-      const { firstName, familyName } = openApi.getFormData();
-      openApi.setFieldValue(target, `${firstName} ${familyName}`);
-    }
-  }}
-/>
-```
-
----
-
-## 十、多语言支持
-
-### 1. Form 多语言配置
-
-```jsx
-<Form
-  lang={[
-    "cn",
-    {
-      name: "EnUS",
-      label: "英文",
-      options: {
-        labelTransform: (label) => label + "(en)",
-        ignore: [{ name: "avatar" }],
-        disabled: [{ name: "file" }]
-      }
-    }
-  ]}
->
-  <FormInfo
-    list={[
-      <Input name="name" label="姓名" rule="REQ" />
-    ]}
-  />
-</Form>
-```
-
-### 2. lang 配置项
-
-| 配置 | 说明 |
-|-----|-----|
-| name | 语言标识 |
-| label | 语言名称 |
-| options.labelTransform | label 转换函数 |
-| options.ignore | 忽略的字段 |
-| options.disabled | 禁用的字段 |
-| options.nameTransform | name 转换函数 |
-
----
-
-## 十一、最佳实践
-
-### ✅ 推荐做法
-
-1. **使用 createWithRemoteLoader 导入**: FormInfo 必须通过 `createWithRemoteLoader` 加载
-2. **禁止通过 props 传递 FormInfo**: 子组件需要使用 FormInfo 时，应自行加载
-3. **字段命名**: 使用有意义的 name，支持嵌套如 `data.name`
-4. **校验规则**: 组合使用内置规则，如 `"REQ LEN-3-10 EMAIL"`
-5. **布局**: 使用 `column` 控制列数，常用 `column={1}` 或 `column={2}`
-6. **条件渲染**: 使用 `display` 属性进行条件判断
-7. **日期限制**: 使用 `dayjs` 进行日期比较，禁止过去日期
-8. **列表字段**: 设置 `maxLength` 限制数量
-
-### ❌ 错误示例
-
-```jsx
-// 错误：通过 props 传递 FormInfo
-const Parent = createWithRemoteLoader({
-  modules: ['components-core:FormInfo']
-})(({ remoteModules }) => {
-  const [FormInfo] = remoteModules;
-  return <ChildForm FormInfo={FormInfo} />;
-});
-
-const ChildForm = ({ FormInfo }) => {
-  return (
-    <Form>
-      <FormInfo list={[...]} />
-    </Form>
-  );
-};
-```
-
-### ✅ 正确示例
-
-```jsx
-// 正确：子组件自行加载 FormInfo
-const Parent = createWithRemoteLoader({
-  modules: ['components-core:FormInfo']
-})(({ remoteModules }) => {
-  return <ChildForm />;
-});
-
-const ChildForm = createWithRemoteLoader({
-  modules: ['components-core:FormInfo']
-})(({ remoteModules }) => {
-  const [FormInfo] = remoteModules;
-  return (
-    <Form>
-      <FormInfo list={[...]} />
-    </Form>
-  );
-});
-```
-
----
-
-## 附录
-
-### 完整示例：员工信息表单
-
-```jsx
-import { createWithRemoteLoader } from '@kne/remote-loader';
-
-const EmployeeForm = createWithRemoteLoader({
-  modules: ['components-core:FormInfo']
-})(({ remoteModules }) => {
-  const [FormInfo] = remoteModules;
-  const { Form, SubmitButton, CancelButton, fields } = FormInfo;
-  const { Input, TextArea, Select, DatePicker, PhoneNumber, List, TableList } = fields;
-
-  return (
-    <Form
-      data={{ employeeId: 'EMP001' }}
-      onSubmit={async (data) => {
-        console.log('提交数据:', data);
-      }}
-    >
-      <FormInfo
-        title="基本信息"
-        subtitle="请填写员工基本个人信息"
-        column={2}
-        gap={20}
-        list={[
-          <Input name="employeeId" label="工号" rule="REQ" disabled />,
-          <Input name="name" label="姓名" rule="REQ" placeholder="请输入姓名" />,
-          <PhoneNumber name="phone" label="手机号" rule="REQ" />,
-          <Input name="email" label="邮箱" rule="REQ EMAIL" />,
-          <DatePicker name="birthday" label="出生日期" />,
-          <Select
-            name="department"
-            label="部门"
-            rule="REQ"
-            options={[
-              { label: "技术部", value: "tech" },
-              { label: "产品部", value: "product" }
-            ]}
-          />
-        ]}
-      />
-
-      <List
-        name="workExperience"
-        title="工作经历"
-        itemTitle={({ index, data }) => data?.companyName || `经历 ${index + 1}`}
-        maxLength={5}
-        important
-        addText="添加经历"
-        list={[
-          <Input name="companyName" label="公司名称" rule="REQ" />,
-          <Input name="jobTitle" label="职位" rule="REQ" />,
-          <DatePicker name="period" label="在职时间" />,
-          <TextArea name="description" label="工作描述" block />
-        ]}
-      />
-
-      <TableList
-        name="familyMembers"
-        title="家庭成员"
-        maxLength={5}
-        addText="添加成员"
-        list={[
-          <Input name="name" label="姓名" rule="REQ" />,
-          <Input name="relationship" label="关系" rule="REQ" />,
-          <PhoneNumber name="phone" label="电话" />
-        ]}
-      />
-
-      <FormInfo
-        title="紧急联系人"
-        column={3}
-        list={[
-          <Input name="emergencyContact" label="姓名" rule="REQ" />,
-          <Input name="emergencyRelation" label="关系" rule="REQ" />,
-          <PhoneNumber name="emergencyPhone" label="电话" rule="REQ TEL" />
-        ]}
-      />
-
-      <div style={{ textAlign: 'center', marginTop: 24 }}>
-        <CancelButton>取消</CancelButton>
-        <SubmitButton type="primary">提交</SubmitButton>
-      </div>
-    </Form>
-  );
-});
-
-export default EmployeeForm;
-```
diff --git a/prompts/README.md b/prompts/README.md
deleted file mode 100644
index 979f126..0000000
--- a/prompts/README.md
+++ /dev/null
@@ -1,173 +0,0 @@
-# Prompts 文档集合
-
-本项目包含多个 AI prompts 文档，用于指导生成前端组件库相关的代码模块、文档和示例。
-
----
-
-## 文档集合列表
-
-### 1. BizUnit 使用指南
-
-**功能**: 生成基于 BizUnit 架构模式的完整前端业务模块
-
-**适用场景**:
-- 需要生成包含完整 CRUD 功能的前端业务模块
-- 需要国际化支持和可复用组件结构
-- 生成符合规范的目录结构和文档示例
-
-**核心内容**:
-- 模块目录结构规范（List、Detail、FormInner、TabDetail、Actions 等组件）
-- 核心组件实现规范（根组件、列表页、表单组件、详情页、Tab 详情页）
-- 国际化文件规范（中英文语言包）
-- API 集成规范
-- 文档示例规范
-
-**所属集合**: `prompts-remote-components/`
-
----
-
-### 2. RemoteLoader 使用指南
-
-**功能**: 远程模块加载库的使用指南，基于 Webpack 5 Module Federation
-
-**适用场景**:
-- 构建微前端架构
-- 需要在运行时动态加载远程模块
-- 多团队独立开发部署模块的场景
-
-**核心内容**:
-- 四种使用方式：RemoteLoader 组件、withRemoteLoader HOC、useLoader Hook、createWithRemoteLoader
-- 模块标记格式详解
-- API 参考（preset、loadModule、safeLoadModule、parseToken 等）
-- 缓存机制
-- 错误处理和调试
-- 性能优化
-
-**所属集合**: `prompts-remote-components/`
-
----
-
-### 3. FormInfo 使用指南
-
-**功能**: 基于 React 和 Ant Design 的企业级表单组件库
-
-**适用场景**:
-- 构建复杂的表单页面
-- 需要表单验证、动态字段、弹窗/抽屉表单
-- 分步表单向导
-
-**核心内容**:
-- 核心组件：Form、FormInfo、SubmitButton、CancelButton
-- 字段类型：Input、TextArea、Select、DatePicker、Upload 等
-- 校验规则配置
-- 列表组件：List（卡片式）、TableList（表格）
-- 弹窗与抽屉：FormModal、FormDrawer
-- 分步表单：FormSteps、FormStepModal
-- 表单 Hook：useFormModal、useFormDrawer、useFormStepModal
-- 国际化支持
-
-**所属集合**: 根目录、`prompts-remote-components/`（内容相同）
-
----
-
-### 4. 国际化
-
-**功能**: 指导组件完成国际化改造
-
-**适用场景**:
-- 需要为组件添加多语言支持
-- 创建语言包和国际化上下文
-- 修改组件以支持国际化
-
-**核心内容**:
-- 国际化文件创建（withLocale.js、locale/zh-CN.js、locale/en-US.js）
-- 组件修改模式（主组件、FormInner、getColumns、Action）
-- useIntl Hook 和 withLocale HOC 使用方式
-- createWithRemoteLoader 组件的国际化包裹规范
-- 语言包 key 命名规范
-- 检查要点清单
-
-**所属集合**: `prompts-remote-components/`
-
----
-
-### 5. 生成文档
-
-**功能**: 根据代码实现自动生成项目文档（summary.md 和 api.md）
-
-**适用场景**:
-- 需要为组件生成规范化的项目概述文档
-- 需要生成 API 属性表格文档
-- 组件开发完成后需要补充文档
-
-**核心内容**:
-- 项目概述文档（doc/summary.md）格式规范
-- API 文档（doc/api.md）格式规范
-- 文档生成流程（分析代码结构、提取 API 信息）
-- 格式约束（标题级别、表格格式、无示例代码）
-
-**所属集合**: `prompts-remote-components/`
-
----
-
-### 6. 组件示例编写提示词
-
-**功能**: 指导编写规范的组件示例代码和配置
-
-**适用场景**:
-- 为组件编写可运行的示例代码
-- 配置 example.json 示例配置文件
-- 编写覆盖 API 的完整示例
-
-**核心内容**:
-- 文件结构规范（doc/ 目录、子组件示例规则）
-- example.json 配置结构
-- 示例代码规范（scope 依赖声明、导入方式）
-- 示例内容设计原则（API 覆盖率、真实业务场景、数据真实性）
-- FormInfo 组件示例特殊规则
-- Mock 数据规范和使用方式
-- 示例完整性检查清单
-
-**所属集合**: 根目录、`prompts-remote-components/`（内容略有差异）
-
----
-
-### 7. BizUnit 业务模块生成提示词
-
-**功能**: 快速生成业务模块 action 的代码模板
-
-**适用场景**:
-- 需要快速生成业务表单操作按钮
-- 创建新建、编辑类业务组件
-
-**核心内容**:
-- 组件命名规范（大写字母开头英文名称）
-- 代码模板结构
-- 成功提示语配置
-- 表单弹窗集成
-
-**所属集合**: 根目录
-
----
-
-## 快速选择指南
-
-| 需求 | 推荐文档 | 所属集合 |
-|------|---------|---------|
-| 生成完整的业务模块（列表+表单+详情） | BizUnit 使用指南 | prompts-remote-components/ |
-| 加载远程组件/微前端 | RemoteLoader 使用指南 | prompts-remote-components/ |
-| 构建表单页面（验证、动态字段、弹窗） | FormInfo 使用指南 | 两者都有 |
-| 为组件添加多语言支持 | 国际化 | prompts-remote-components/ |
-| 为组件生成项目概述和 API 文档 | 生成文档 | prompts-remote-components/ |
-| 编写组件示例代码和配置 | 组件示例编写提示词 | 两者都有 |
-| 快速生成业务 Action 组件 | BizUnit 业务模块生成提示词 | 根目录 |
-
----
-
-## 版本信息
-
-```json
-{
-  "@kne/prompts-remote-components": "1.0.2"
-}
-```
diff --git a/prompts/bizunit-module-prompt.md b/prompts/bizunit-module-prompt.md
deleted file mode 100644
index 98edfd7..0000000
--- a/prompts/bizunit-module-prompt.md
+++ /dev/null
@@ -1,270 +0,0 @@
-# BizUnit前端业务模块生成提示词
-
-## 模块概述
-
-请根据以下规范生成一个完整的前端业务模块，该模块基于BizUnit架构模式，包含完整的CRUD功能、国际化支持、文档示例和可复用的组件结构。
-
-## 目录结构
-
-```
-src/components/[ModuleName]/
-├── index.js                          # 主入口文件，导出所有组件
-├── [ModuleName].js                   # 根组件，路由配置
-├── withLocale.js                     # 国际化HOC封装
-├── style.module.scss                 # 全局样式文件
-├── Actions/                          # 操作按钮组件目录
-│   ├── index.js                      # Actions主组件
-│   ├── Create.js                     # 新建按钮
-│   ├── Save.js                       # 编辑/保存按钮
-│   ├── Remove.js                     # 删除按钮
-│   └── SetStatus.js                  # 设置状态按钮
-├── Detail/                           # 详情页目录
-│   ├── index.js                      # 详情页主组件
-│   └── RightOptions.js               # 右侧操作按钮
-├── FormInner/                        # 表单内部组件目录
-│   └── index.js                      # 表单字段定义
-├── List/                             # 列表页目录
-│   ├── index.js                      # 列表页主组件
-│   └── getColumns.js                 # 列配置
-├── TabDetail/                        # Tab详情页目录
-│   ├── index.js                      # Tab详情页主组件
-│   └── [TabName]/                     # 各个Tab内容
-├── locale/                           # 国际化文件目录
-│   ├── zh-CN.js                      # 中文语言包
-│   └── en-US.js                      # 英文语言包
-├── doc/                              # 文档和示例目录
-│   ├── api.md                        # API文档
-│   ├── list.js                       # 列表示例
-│   ├── detail.js                     # 详情示例
-│   ├── form-inner.js                 # 表单示例
-│   ├── tab-detail.js                 # Tab详情示例
-│   ├── example.json                  # 示例数据
-│   ├── summary.md                    # 摘要说明
-│   └── style.scss                    # 文档样式
-└── README.md                         # 模块说明文档
-```
-
-## 核心组件实现规范
-
-### 1. 主入口文件 (index.js)
-
-导出所有子组件，包括：
-- 默认导出：根组件
-- 命名导出：List, FormInner, Detail, TabDetail, Actions等
-
-### 2. 根组件 ([ModuleName].js)
-
-- 使用 `createWithRemoteLoader` 进行远程模块加载
-- 使用 `ChildrenRouter` 或 `AppChildrenRouter` 进行路由配置
-- 配置路由路径和懒加载
-- 支持自定义 navigation 和 list 配置
-
-示例结构：
-```javascript
-import ChildrenRouter from '@kne/app-children-router';
-import withLocale from './withLocale';
-
-const ModuleNameInner = ({ baseUrl, ...props }) => {
-  return (
-    <ChildrenRouter
-      {...props}
-      baseUrl={`${baseUrl}/route-path`}
-      list={[
-        { index: true, loader: () => import('./List') },
-        { path: 'detail', loader: () => import('./Detail') },
-        { path: 'tab-detail', loader: () => import('./TabDetail') }
-      ]}
-    />
-  );
-};
-
-export default withLocale(ModuleNameInner);
-```
-
-### 3. 国际化封装 (withLocale.js)
-
-使用 `createWithIntlProvider` 创建国际化HOC：
-```javascript
-import { createWithIntlProvider } from '@kne/react-intl';
-import zhCN from './locale/zh-CN';
-import enUS from './locale/en-US';
-
-const withLocale = createWithIntlProvider({
-  defaultLocale: 'zh-CN',
-  messages: {
-    'zh-CN': zhCN,
-    'en-US': enUS
-  },
-  namespace: 'components-admin:ModuleName'
-});
-
-export default withLocale;
-```
-
-### 4. 列表页 (List/index.js)
-
-- 使用 `TablePage` 或 `Table` 组件
-- 集成 `Filter` 进行筛选
-- 使用 `StateBar` 进行状态切换
-- 定义 `getColumns` 配置表格列
-- 支持 `SearchInput` 关键字搜索
-- 支持分页、排序
-
-核心要素：
-- `usePreset()` 获取apis配置
-- `useIntl()` 获取formatMessage
-- `useRef()` 管理表格reload
-- `useState()` 管理筛选状态
-- `useNavigate()` 路由跳转
-
-### 5. 列配置 (List/getColumns.js)
-
-导出 `getColumns` 函数，接收 `{ navigate, formatMessage }` 参数
-列类型包括：
-- `serialNumber`: 序号
-- `mainInfo`: 主信息（可点击）
-- `tag`: 标签
-- `description`: 描述
-- `datetime`: 日期时间
-- `options`: 操作列
-
-### 6. 表单组件 (FormInner/index.js)
-
-- 使用 `FormInfo` 组件
-- 支持多种字段类型：
-  - `Input`: 文本输入
-  - `InputNumber`: 数字输入
-  - `TextArea`: 文本域
-  - `Select`: 下拉选择
-  - `DatePicker`: 日期选择
-  - `DateRangePicker`: 日期范围
-  - `Switch`: 开关
-  - `ColorPicker`: 颜色选择器
-  - `Avatar`: 头像上传
-- 支持验证规则：`REQ`必填, `LEN-0-100`长度限制
-
-### 7. 详情页 (Detail/index.js)
-
-- 使用 `Fetch` 组件获取详情数据
-- 使用 `Page` 和 `InfoPage` 组件
-- 使用 `Descriptions` 展示详情信息
-- 支持 `RightOptions` 操作按钮
-
-### 8. Tab详情页 (TabDetail/index.js)
-
-- 使用 `StateBarPage` 组件
-- 支持多个Tab切换
-- 使用 `PageHeader` 显示标题和标签
-- 使用 `StateTag` 显示状态标签
-- 根据 `searchParams.get('tab')` 切换内容
-
-### 9. Actions组件 (Actions/index.js)
-
-- 使用 `ButtonGroup` 组件
-- 定义操作列表：
-  - 编辑
-  - 设置状态
-  - 删除
-- 支持条件显示（hidden属性）
-- 支持确认弹窗（confirm属性）
-
-### 10. 各个Action按钮
-
-- **Create.js**: 新建按钮，使用 `useFormModal`
-- **Save.js**: 编辑按钮，使用 `useFormModal`，预填充数据
-- **Remove.js**: 删除按钮，需要confirm确认
-- **SetStatus.js**: 设置状态按钮
-
-## 国际化文件规范
-
-### zh-CN.js 和 en-US.js
-
-包含以下类型键值：
-- 列表列标题：ID, Name, Status, Description, CreatedAt等
-- 操作按钮：Add, Edit, Delete, Save等
-- 成功提示：AddSuccess, SaveSuccess, DeleteSuccess等
-- 确认提示：DeleteConfirm等
-- 表单标签：字段名称
-- 详情页标题
-
-## API集成规范
-
-通过 `usePreset()` 获取 `apis` 对象，包含：
-- `list`: 列表接口
-- `detail`: 详情接口
-- `create`: 新建接口
-- `save`: 编辑接口
-- `remove`: 删除接口
-- 其他业务接口
-
-## 文档示例规范
-
-### doc/list.js
-
-使用 `PureGlobal` 提供mock数据：
-```javascript
-const { default: List } = _ModuleName;
-const { createWithRemoteLoader } = remoteLoader;
-const BaseExample = createWithRemoteLoader({
-  modules: ['components-core:Global@PureGlobal', 'components-core:Global@usePreset', 'components-core:Layout']
-})(({ remoteModules }) => {
-  const [PureGlobal, usePreset, Layout] = remoteModules;
-  const { ajax } = usePreset();
-  return (
-    <PureGlobal preset={{ ajax, apis: { testApi: { getList, add, save, remove } } }}>
-      <Layout navigation={{ isFixed: false }}>
-        <List />
-      </Layout>
-    </PureGlobal>
-  );
-});
-render(<BaseExample />);
-```
-
-### README.md
-
-包含：
-- 概述（模块功能说明）
-- 示例代码（列表、表单、详情、Tab详情）
-- API文档（属性说明表格）
-
-## 样式规范
-
-- 使用 CSS Modules（`*.module.scss`）
-- 遵循 BEM 命名规范
-- 响应式设计支持
-
-## 技术栈
-
-- React 18+
-- React Router v6
-- Ant Design 5.x
-- @kne/remote-loader（远程模块加载）
-- @kne/react-intl（国际化）
-- @kne/react-fetch（数据请求）
-- @kne/app-children-router（路由组件）
-
-## 生成要求
-
-1. 完整实现上述目录结构
-2. 所有组件使用 `createWithRemoteLoader` 加载依赖
-3. 所有组件使用 `withLocale` HOC进行国际化封装
-4. 实现完整的CRUD功能
-5. 提供完整的国际化文件（中英文）
-6. 提供完整的文档示例
-7. 代码风格统一，使用ESLint
-8. 注释清晰，易于维护
-9. 支持响应式设计
-10. 提供类型定义（TypeScript项目）
-
-## 上下文信息
-
-生成模块时需要提供：
-- 模块名称（ModuleName）
-- 业务字段定义
-- API接口路径
-- 特殊业务逻辑说明
-- 列表列配置要求
-- 表单字段配置要求
-- 详情页展示要求
-- Tab页配置要求（如需要）
diff --git "a/prompts/prompts-remote-components/BizUnit\344\275\277\347\224\250\346\214\207\345\215\227.md" "b/prompts/prompts-remote-components/BizUnit\344\275\277\347\224\250\346\214\207\345\215\227.md"
index 91efa59..9326677 100644
--- "a/prompts/prompts-remote-components/BizUnit\344\275\277\347\224\250\346\214\207\345\215\227.md"
+++ "b/prompts/prompts-remote-components/BizUnit\344\275\277\347\224\250\346\214\207\345\215\227.md"
@@ -164,20 +164,263 @@ export default withLocale;
 
 ### 9. Actions组件 (Actions/index.js)
 
-- 使用 `ButtonGroup` 组件
-- 定义操作列表：
-    - 编辑
-    - 设置状态
-    - 删除
-- 支持条件显示（hidden属性）
-- 支持确认弹窗（confirm属性）
+Actions 是一个**条件组合器**，根据业务状态动态组装可用 Action 列表，通过 `ButtonGroup` 统一渲染。
+
+#### 核心架构
+
+```
+Actions (组合器)
+  ├── 根据 data 条件组装 list 数组
+  ├── list 每项: { buttonComponent, data, children, onSuccess, ...props }
+  └── <ButtonGroup list={list} /> 或 children({ list }) 自定义渲染
+       └── 遍历 list → React.createElement(item.buttonComponent, item)
+           ├── Detail      → <Button onClick={modal(DetailContent)} />
+           ├── SendMessage  → <Button onClick={modal(Form)} />
+           ├── Remove       → <ConfirmButton onClick={ajax(remove)} />
+           └── ...
+```
+
+#### 实现规范
+
+```javascript
+import { createWithRemoteLoader } from '@kne/remote-loader';
+import withLocale from '../withLocale';
+import { useIntl } from '@kne/react-intl';
+import Detail from './Detail';
+import SendMessage from './SendMessage';
+
+const ActionsInner = createWithRemoteLoader({
+  modules: ['components-core:ButtonGroup']
+})(({ remoteModules, children, data, onSuccess, moreType = 'link', itemClassName, ...props }) => {
+  const [ButtonGroup] = remoteModules;
+  const { formatMessage } = useIntl();
+  const list = [];
+
+  // 始终显示详情按钮
+  list.push({
+    ...props,
+    buttonComponent: Detail,
+    data,
+    children: formatMessage({ id: 'Detail' }),
+    onSuccess
+  });
+
+  // 条件显示：状态为启用时才显示发送按钮
+  if (Number(data.status) === 0) {
+    list.push({
+      ...props,
+      buttonComponent: SendMessage,
+      data,
+      children: formatMessage({ id: 'SendMessage' }),
+      onSuccess
+    });
+  }
+
+  // 支持自定义渲染
+  if (typeof children === 'function') {
+    return children({ list });
+  }
+
+  // 默认渲染 ButtonGroup
+  return <ButtonGroup itemClassName={itemClassName} list={list} moreType={moreType} />;
+});
+
+const Actions = withLocale(ActionsInner);
+export { Detail, SendMessage };
+export default Actions;
+```
+
+#### 关键要点
+
+1. **`list` 项结构**：每项必须包含 `buttonComponent`（组件引用）+ `children`（按钮文字）+ `data` + `onSuccess` + `...props`
+2. **`...props` 透传机制**：让 `ButtonGroup` → 个体 Action 之间的属性传递自然流畅，按钮样式（`type="link"`）、`className` 等由上层注入
+3. **条件组合**：根据业务状态（如 `data.status`）动态决定显示哪些 Action
+4. **双渲染模式**：默认 `<ButtonGroup list={list} />` 自动渲染按钮组（按钮过多时折叠为"更多"下拉）；当 `children` 是函数时，`children({ list })` 让调用方完全掌控渲染
+5. **业务区分属性**：如需区分不同业务场景（模板/记录），使用 `detailType` 等语义化命名，**不要占用 `type` 属性**（`type` 专用于按钮样式，如 `type="link"`）
 
 ### 10. 各个Action按钮
 
-- **Create.js**: 新建按钮，使用 `useFormModal`
-- **Save.js**: 编辑按钮，使用 `useFormModal`，预填充数据
-- **Remove.js**: 删除按钮，需要confirm确认
-- **SetStatus.js**: 设置状态按钮
+**核心原则：每个 Action 组件自己渲染自己的 Button，自己管理自己的 Modal/请求逻辑，不依赖外部提供 UI 容器。**
+
+#### 两种 Action 模式
+
+**模式 A — 展示型 Action（详情、错误详情等）**
+
+使用 `Button` + `useModal`，点击按钮打开弹窗展示内容：
+
+```javascript
+import { createWithRemoteLoader } from '@kne/remote-loader';
+import { Button } from 'antd';
+import withLocale from '../withLocale';
+import { useIntl } from '@kne/react-intl';
+import DetailContent from '../DetailContent';
+
+const DetailInner = createWithRemoteLoader({
+  modules: ['components-core:Modal@useModal']
+})(({ remoteModules, data, ...props }) => {
+  const [useModal] = remoteModules;
+  const { formatMessage } = useIntl();
+  const modal = useModal();
+
+  return (
+    <Button
+      {...props}    // ← 关键：透传，让 ButtonGroup 控制按钮外观
+      onClick={() => {
+        modal({
+          title: formatMessage({ id: 'Detail' }),
+          width: 760,
+          footer: null,
+          children: <DetailContent data={data} />
+        });
+      }}
+    />
+  );
+});
+
+const Detail = withLocale(DetailInner);
+export default Detail;
+```
+
+**模式 B — 操作型 Action（删除、取消、重试等）**
+
+使用 `ConfirmButton`，点击后确认再执行 API 请求：
+
+```javascript
+import { createWithRemoteLoader } from '@kne/remote-loader';
+import { App } from 'antd';
+import withLocale from '../withLocale';
+import { useIntl } from '@kne/react-intl';
+
+const RemoveInner = createWithRemoteLoader({
+  modules: ['components-core:Global@usePreset', 'components-core:ConfirmButton']
+})(({ remoteModules, data, onSuccess, ...props }) => {
+  const [usePreset, ConfirmButton] = remoteModules;
+  const { formatMessage } = useIntl();
+  const { apis, ajax } = usePreset();
+  const { message } = App.useApp();
+
+  return (
+    <ConfirmButton
+      {...props}    // ← 关键：透传
+      message={formatMessage({ id: 'DeleteConfirm' })}
+      isDelete={true}
+      onClick={async () => {
+        const { data: resData } = await ajax(
+          Object.assign({}, apis.moduleName.remove, {
+            data: { id: data.id }
+          })
+        );
+        if (resData.code !== 0) {
+          return;
+        }
+        message.success(formatMessage({ id: 'DeleteSuccess' }));
+        onSuccess && onSuccess();
+      }}
+    />
+  );
+});
+
+const Remove = withLocale(RemoveInner);
+export default Remove;
+```
+
+**模式 C — 表单型 Action（新建、编辑、发送等）**
+
+使用 `Button` + `useModal` + `Form`，点击按钮打开表单弹窗：
+
+```javascript
+import { createWithRemoteLoader } from '@kne/remote-loader';
+import { App, Button } from 'antd';
+import withLocale from '../withLocale';
+import { useIntl } from '@kne/react-intl';
+
+const SendMessageInner = createWithRemoteLoader({
+  modules: ['components-core:Global@usePreset', 'components-core:FormInfo', 'components-core:Modal@useModal']
+})(({ remoteModules, data, onSuccess, ...props }) => {
+  const [usePreset, FormInfo, useModal] = remoteModules;
+  const { apis, ajax } = usePreset();
+  const { formatMessage } = useIntl();
+  const { message } = App.useApp();
+  const modal = useModal();
+  const { Form, FormGroup, FormItem, Input } = FormInfo;
+
+  return (
+    <Button
+      {...props}    // ← 关键：透传
+      onClick={() => {
+        modal({
+          title: formatMessage({ id: 'SendMessage' }),
+          width: 520,
+          children: (
+            <Form
+              onSubmit={async (formData) => {
+                const { data: resData } = await ajax(
+                  Object.assign({}, apis.moduleName.send, {
+                    data: { id: data.id, ...formData }
+                  })
+                );
+                if (resData.code !== 0) {
+                  return;
+                }
+                message.success(formatMessage({ id: 'SendMessageSuccess' }));
+                onSuccess && onSuccess();
+                return true; // 返回 true 关闭弹窗
+              }}
+            >
+              <FormGroup>
+                <FormItem name="name" label="名称" required>
+                  <Input />
+                </FormItem>
+              </FormGroup>
+            </Form>
+          )
+        });
+      }}
+    />
+  );
+});
+
+const SendMessage = withLocale(SendMessageInner);
+export default SendMessage;
+```
+
+#### Action 组件通用规范
+
+| 特性 | 说明 |
+|------|------|
+| `createWithRemoteLoader` | 声明远程模块依赖，框架异步加载后注入 `remoteModules` |
+| `withLocale` 包裹 | 注入 i18n 的 `formatMessage` 能力 |
+| 接收 `data` prop | 当前行的数据对象 |
+| 接收 `onSuccess` prop | 操作成功后的回调（刷新列表等） |
+| `...props` 透传 | **关键机制** — 让 ButtonGroup 能控制按钮外观和行为 |
+| **自己渲染自己的 Button** | 每个 Action 是完整自包含的组件，而非单纯的配置项 |
+| **独立可用** | 每个 Action 可以脱离 Actions 组合器独立使用（如批量操作场景） |
+
+#### 在 getColumns 中的集成方式
+
+操作列由 Actions 完全接管，不在 getColumns 中手动创建 Button：
+
+```javascript
+import Actions from './Actions';
+
+const getColumns = ({ formatMessage, onSuccess }) => [
+  // ... 数据列 ...
+  {
+    name: 'options',
+    title: formatMessage({ id: 'Operation' }),
+    type: 'options',
+    fixed: 'right',
+    valueOf: item => ({
+      children: <Actions type="link" data={item} onSuccess={onSuccess} />
+    })
+  }
+];
+```
+
+**注意**：
+- 操作列不需要 `openDetail` 等外部回调，详情等展示型操作由 Action 组件自行管理
+- `type="link"` 控制按钮样式为链接型，与 Task 等组件保持一致
+- 业务区分属性（如模板/记录）使用 `detailType` 等语义化命名，不占用 `type`
 
 ## 国际化文件规范
 
diff --git "a/prompts/\346\226\260\345\273\272FormAction.md" "b/prompts/\346\226\260\345\273\272FormAction.md"
deleted file mode 100644
index 4cd3a73..0000000
--- "a/prompts/\346\226\260\345\273\272FormAction.md"
+++ /dev/null
@@ -1,65 +0,0 @@
-帮我生成一个[业务模块名称]的action，生成要求如下：
-
-1. 根据 [业务模块名称] 取一个大写字母开头的英文名称
-2. 将文件名改为 [英文名称].js
-3. 将组件名称 "业务组件名称" 改为 [英文名称]
-4. 将表单标题 "[业务模块名称]" 改为实际的 [业务模块名称]
-5. 将成功提示 "[操作][业务模块名称]成功" 改为 "操作[业务模块名称]成功"
-6. 保持其他代码结构和逻辑不变
-7. 输出到当前目录
-
-* 请注意，如果[业务模块名称]中包含中文，请将中文转换为英文,驼峰命名
-
-* 以下是代码模版
-
-```jsx
-import { createWithRemoteLoader } from '@kne/remote-loader';
-import { Button, App } from 'antd';
-
-const [业务组件名称] = createWithRemoteLoader({
-  modules: ['components-core:FormInfo@useFormModal', 'components-core:Global@usePreset']
-})(({ remoteModules, onSuccess, data, options, getFormInner, ...props }) => {
-  const [useFormModal, usePreset] = remoteModules;
-  const formModal = useFormModal();
-  const { ajax } = usePreset();
-  const { message } = App.useApp();
-
-  return (
-    <Button
-      {...props}
-      onClick={() => {
-        formModal({
-          title: '[业务模块名称]',
-          size: 'small',
-          formProps: {
-            data: Object.assign({}, data),
-            onSubmit: async formData => {
-              const { data: resData } = await ajax(
-                Object.assign(
-                  {},
-                  {
-                    data: Object.assign({}, formData, { id: data.id })
-                  }
-                )
-              );
-              if (resData.code !== 0) {
-                return false;
-              }
-              message.success('[操作][业务模块名称]成功');
-              onSuccess && onSuccess();
-            }
-          }
-        });
-      }}
-    />
-  );
-});
-
-export default [业务组件名称];
-```
-
-示例：
-- 如果业务模块名称是"角色设置"，英文名称可以是"RoleConfig"
-- 如果业务模块名称是"用户管理"，英文名称可以是"UserManage"
-
-请基于以下信息生成新的action组件:
\ No newline at end of file
diff --git "a/prompts/\347\273\204\344\273\266\347\244\272\344\276\213\347\274\226\345\206\231\346\217\220\347\244\272\350\257\215.md" "b/prompts/\347\273\204\344\273\266\347\244\272\344\276\213\347\274\226\345\206\231\346\217\220\347\244\272\350\257\215.md"
deleted file mode 100644
index d0bb88c..0000000
--- "a/prompts/\347\273\204\344\273\266\347\244\272\344\276\213\347\274\226\345\206\231\346\217\220\347\244\272\350\257\215.md"
+++ /dev/null
@@ -1,623 +0,0 @@
-# 组件示例编写提示词
-
-## 1. 文件结构规范
-
-### 父组件目录结构
-在组件目录下创建 `doc/` 目录，包含以下文件：
-- `api.md` - 组件API文档（表格格式：属性名|说明|类型|默认值）
-- `summary.md` - 组件简要描述
-- `example.json` - 示例配置文件（核心）
-- `base.js` - 基础示例代码
-- `[其他示例].js` - 扩展示例代码（如`transcript.js`、`scene.js`等）
-- `style.scss` - 示例样式（可选）
-
-### 子组件示例规则
-**重要**：如果一个组件导出了多个子组件，所有子组件的示例都应该放在父组件的 `doc/` 目录中，而不是在子组件目录下创建单独的 `doc/` 目录。
-
-示例：
-```
-src/components/Client/
-├── index.js
-├── Home/
-│   └── index.js
-├── Dashboard/
-│   └── index.js
-├── Learn/
-│   └── index.js
-├── Profile/
-│   └── index.js
-└── doc/
-    ├── base.js          # Client主组件示例
-    ├── home.js          # Home子组件示例
-    ├── dashboard.js     # Dashboard子组件示例
-    ├── learn.js         # Learn子组件示例
-    ├── profile.js       # Profile子组件示例
-    ├── example.json     # 所有示例配置
-    ├── api.md           # 所有API文档
-    ├── summary.md       # 组件描述
-    └── style.scss
-```
-
-在 `example.json` 中为每个子组件添加独立的示例条目，子组件示例通过解构父组件导出进行引用：
-```javascript
-const { Home, Dashboard, Learn, Profile } = _Client;
-```
-
-## 2. example.json 配置结构
-```json
-{
-  "isFull": false,  // 是否全屏展示
-  "list": [
-    {
-      "title": "示例标题",
-      "description": "示例说明",
-      "code": "./base.js",  // 相对路径引用示例代码
-      "scope": [  // 示例依赖包声明
-        {
-          "name": "_Report",  // 导入变量名（带下划线）
-          "packageName": "@components/Report"  // 包路径
-        },
-        {
-          "name": "_mockPreset",
-          "packageName": "@root/mockPreset"
-        },
-        {
-          "name": "remoteLoader",
-          "packageName": "@kne/remote-loader"
-        }
-      ]
-    }
-  ]
-}
-```
-
-## 3. 示例代码规范
-- **导入方式**：使用 `scope` 中声明的变量名（带下划线前缀）
-- **组件引用**：`const { default: ComponentName } = _ComponentName;`
-- **工具包引用**：`const { createWithRemoteLoader } = remoteLoader;`
-
-### 标准示例模板（需要远程加载和数据模拟）
-```javascript
-const { default: YourComponent } = _YourComponent;
-const { default: preset, mockData } = _mockPreset;
-const { createWithRemoteLoader } = remoteLoader;
-
-const BaseExample = createWithRemoteLoader({
-  modules: ['components-core:Global@PureGlobal']
-})(({ remoteModules }) => {
-  const [PureGlobal] = remoteModules;
-  return (
-    <PureGlobal preset={preset}>
-      <YourComponent data={mockData.data} />
-    </PureGlobal>
-  );
-});
-
-render(<BaseExample />);
-```
-
-### 简化示例模板（无需远程加载）
-```javascript
-const { default: YourComponent } = _YourComponent;
-const { Flex, Switch } = antd; // ⚠️ 使用了 antd 组件必须解构导入
-const { useState } = React;
-
-const BaseExample = () => {
-  const [state, setState] = useState(false);
-  return (
-    <Flex vertical gap={12}>
-      <YourComponent prop={value} />
-    </Flex>
-  );
-};
-
-render(<BaseExample />);
-```
-
-### 示例代码导入检查清单
-编写示例代码时，请务必检查：
-- [ ] 是否使用了 antd 组件（如 Space、Card、Button、Typography 等）？
-    - 如果是，是否在代码中添加了 `const { 组件名 } = antd;` 解构导入？
-    - 如果是，是否在 example.json 的 scope 中添加了 `{"name": "antd", "packageName": "antd"}`？
-- [ ] 是否使用了其他项目组件（如 Icon、Modal 等）？
-    - 如果是，是否在代码中添加了 `const { default: 组件名 } = _ComponentName;` 导入？
-    - 如果是，是否在 example.json 的 scope 中添加了对应的依赖声明？
-- [ ] 是否使用了 React Hook？
-    - React Hook（如 useState、useEffect）无需导入，直接使用即可
-
-## 4. scope 依赖声明规则
-| 场景 | name | packageName |
-|------|------|-------------|
-| 项目组件 | `_ComponentName` | `@components/ComponentName` |
-| Mock预设 | `_mockPreset` | `@root/mockPreset` |
-| 远程加载器 | `remoteLoader` | `@kne/remote-loader` |
-| Antd组件 | `antd` | `antd` |
-| React原生 | `React` | -（无需声明，示例环境中默认可用） |
-| 静态资源 | `bg` | `@components/Component/doc/img.png` |
-
-**重要说明**：
-- React 原生 API（如 `useState`、`useEffect`、`useRef` 等）在示例环境中默认可用，无需在 scope 中声明
-- 在示例代码中直接使用 `React.useState` 或 `useState` 即可，不需要额外的导入
-- React 相关的包（如 `react-icons`）如果需要在示例中使用，建议使用简单的 emoji 或文本替代
-
-**⚠️ 特别注意：Antd 组件引入规范**
-- 如果示例代码中使用了任何 antd 组件（如 `Space`, `Card`, `Button`, `Typography` 等），**必须**在 example.json 的 scope 中声明 `antd` 依赖
-- **必须**在示例代码文件顶部添加 `const { 组件名 } = antd;` 解构导入语句
-- 常见易错点：示例中使用了 antd 组件但忘记在 scope 中声明，或忘记在代码中解构导入，导致 "antd is not defined" 错误
-- 只要示例中有一个组件使用了 antd，就必须在 scope 中声明 antd，即使其他示例没有使用
-
-## 5. Mock 数据规范
-
-### 5.1 mockPreset 目录结构
-```
-src/mockPreset/
-├── index.js                    # 主导出文件
-├── [业务模块].json             # 顶层业务数据文件
-└── [子目录]/                   # 按业务模块分组
-    ├── detail.json
-    ├── list.json
-    └── ...
-```
-
-### 5.2 数据导出方式
-
-#### 方式一：直接导出 JSON 数据（推荐用于简单数据）
-在 `mockPreset/index.js` 中直接导入并导出：
-```javascript
-import interviewReport from './project-interview-report.json';
-import resumeData from './resume-data.json';
-import projectDashboard from './project-dashboard.json';
-
-export { interviewReport, resumeData, projectDashboard };
-```
-
-#### 方式二：通过 preset 对象导出（用于需要 API 模拟的场景）
-在 `mockPreset/index.js` 中配置 preset 对象：
-```javascript
-const apis = merge({}, getApis(), {
-  report: {
-    detail: {
-      loader: () => {
-        return import('./report/detail.json').then(({ default: data }) => data.data);
-      }
-    },
-    userList: {
-      loader: () => {
-        return import('./report/user-list.json').then(({ default: data }) => data.data);
-      }
-    }
-  }
-});
-
-const preset = {
-  ajax: async ({ loader, ...props }) => {
-    if (!loader && props.url) {
-      const { ajax } = await globalInit();
-      return ajax({ loader, ...props });
-    }
-    return Promise.resolve({ 
-      data: loader ? { code: 0, data: loader() } : { code: 0, data: {} } 
-    });
-  },
-  apis,
-  enums: Object.assign({}, enums)
-};
-
-export default preset;
-```
-
-### 5.3 示例中使用 Mock 数据
-
-#### 使用方式一：直接使用导出的数据
-适用于不需要 API 请求的组件：
-```javascript
-const { default: Report } = _Report;
-const { interviewReport, resumeData } = _mockPreset;
-
-const BaseExample = () => {
-  return <Report data={interviewReport} extraData={{ resumeData }} />;
-};
-
-render(<BaseExample />);
-```
-
-对应的 `example.json` 配置：
-```json
-{
-  "scope": [
-    {
-      "name": "_Report",
-      "packageName": "@components/Report"
-    },
-    {
-      "name": "_mockPreset",
-      "packageName": "@root/mockPreset"
-    }
-  ]
-}
-```
-
-#### 使用方式二：通过 preset 传递给 PureGlobal
-适用于需要 API 请求模拟的组件：
-```javascript
-const { default: InventoryReport } = _InventoryReport;
-const { default: mockPreset } = _mockPreset;
-const { createWithRemoteLoader } = remoteLoader;
-
-const BaseExample = createWithRemoteLoader({
-  modules: ['components-core:Global@PureGlobal']
-})(({ remoteModules }) => {
-  const [PureGlobal] = remoteModules;
-  
-  return (
-    <PureGlobal preset={mockPreset}>
-      <InventoryReport />
-    </PureGlobal>
-  );
-});
-
-render(<BaseExample />);
-```
-
-对应的 `example.json` 配置：
-```json
-{
-  "scope": [
-    {
-      "name": "_InventoryReport",
-      "packageName": "@components/InventoryReport"
-    },
-    {
-      "name": "_mockPreset",
-      "packageName": "@root/mockPreset"
-    },
-    {
-      "name": "remoteLoader",
-      "packageName": "@kne/remote-loader"
-    }
-  ]
-}
-```
-
-#### 使用方式三：解构特定数据字段
-适用于只需要部分数据的场景：
-```javascript
-const { default: Dashboard } = _Dashboard;
-const { projectDashboard } = _mockPreset;
-const { createWithRemoteLoader } = remoteLoader;
-
-const BaseExample = createWithRemoteLoader({
-  modules: ['components-core:Global@PureGlobal']
-})(({ remoteModules }) => {
-  const [PureGlobal] = remoteModules;
-  
-  return (
-    <PureGlobal>
-      <Dashboard data={projectDashboard.data} />
-    </PureGlobal>
-  );
-});
-
-render(<BaseExample />);
-```
-
-### 5.4 Mock 数据设计原则
-
-#### 数据真实性要求
-- **使用真实的业务数据**：姓名、部门、职位等应该使用真实的中文名称
-- **数据结构完整**：确保数据结构与实际 API 返回的数据结构一致
-- **数据量合理**：列表数据应该包含 3-10 条记录，既能展示效果又不会过于冗长
-- **字段完整性**：包含所有必需字段和常用可选字段
-
-#### 数据格式规范
-```json
-{
-  "code": 0,
-  "data": {
-    "id": 421,
-    "user": {
-      "name": "张三",
-      "email": "zhangsan@example.com",
-      "mobile": "13800138000",
-      "departments": ["技术部"],
-      "position": "前端工程师"
-    },
-    "items": [
-      {
-        "id": 1,
-        "title": "项目A",
-        "description": "这是一个真实的项目描述"
-      }
-    ]
-  },
-  "error_msg": ""
-}
-```
-
-#### 常见数据类型示例
-- **用户信息**：姓名、邮箱、手机号、部门、职位
-- **列表数据**：包含 id、标题、描述、状态、时间等字段
-- **统计数据**：分数、百分比、数量等数值型数据
-- **时间数据**：使用标准格式 "YYYY-MM-DD HH:mm:ss"
-- **枚举值**：状态码、类型标识等应该使用有意义的值
-
-### 5.5 添加新的 Mock 数据
-
-当需要为新组件添加 mock 数据时：
-
-1. **创建 JSON 文件**：在 `mockPreset/` 目录下创建对应的 JSON 文件
-2. **设计数据结构**：参考实际 API 返回的数据结构
-3. **填充真实数据**：使用真实的业务场景数据
-4. **导出数据**：在 `mockPreset/index.js` 中导入并导出
-5. **在示例中使用**：按照上述使用方式在组件示例中引用
-
-**示例：添加新的用户列表数据**
-
-1. 创建 `mockPreset/user-list.json`：
-```json
-{
-  "code": 0,
-  "data": {
-    "list": [
-      {
-        "id": 1,
-        "name": "张三",
-        "department": "技术部",
-        "position": "前端工程师"
-      },
-      {
-        "id": 2,
-        "name": "李四",
-        "department": "产品部",
-        "position": "产品经理"
-      }
-    ],
-    "total": 2
-  }
-}
-```
-
-2. 在 `mockPreset/index.js` 中导出：
-```javascript
-import userList from './user-list.json';
-export { userList };
-```
-
-3. 在组件示例中使用：
-```javascript
-const { userList } = _mockPreset;
-const BaseExample = () => {
-  return <UserList data={userList.data.list} />;
-};
-```
-
-## 6. 组件开发要求
-- 使用 `createWithRemoteLoader` 包装组件
-- 在 `modules` 中声明远程依赖模块
-- 通过 `remoteModules` 解构获取依赖组件
-
-### 6.1 Mock 数据选择指南
-
-在编写示例时，根据组件特性选择合适的 mock 数据使用方式：
-
-| 组件特性 | 推荐方式 | 示例 |
-|---------|---------|------|
-| 纯展示组件，不需要 API 请求 | 直接使用导出的数据 | `const { interviewReport } = _mockPreset;` |
-| 需要 API 请求模拟 | 通过 preset 传递给 PureGlobal | `<PureGlobal preset={mockPreset}>` |
-| 只需要部分数据字段 | 解构特定数据字段 | `const { projectDashboard } = _mockPreset;` 然后使用 `projectDashboard.data` |
-| 需要多个数据源 | 解构多个导出数据 | `const { interviewReport, resumeData } = _mockPreset;` |
-
-## 7. 示例内容设计原则
-
-### 核心原则
-
-**示例要根据API展示大部分功能，而且需要符合实际业务场景，示例数据也要尽量真实**
-
-这是示例编写的核心要求，所有示例必须满足以下三点：
-
-1. **API覆盖率**：示例必须覆盖组件API文档中的大部分功能，确保每个属性、方法都有对应的示例展示
-2. **真实业务场景**：示例数据和使用场景必须贴近真实业务，避免使用"内容1"、"测试数据"等无意义的占位符
-3. **数据真实性**：使用真实的人名、部门名称、业务状态等，让示例更具参考价值和可复制性
-
-### 示例规划流程
-1. **分析组件功能**：阅读组件源码，理解组件的核心功能和主要使用场景
-2. **阅读 API 文档**：仔细阅读组件的 API 文档（`doc/api.md`），了解所有可用的属性、方法和配置项
-3. **确定示例类型**：根据组件特性和 API 文档规划不同场景的示例，确保覆盖主要使用方式
-4. **设计真实场景**：每个示例都应该模拟真实的业务场景，使用贴近用户的数据
-5. **避免通用占位**：避免使用"内容1"、"示例数据"等通用占位符
-
-**重要：参考 API 文档设计示例**
-
-示例设计必须以 API 文档为依据，确保示例能够充分展示组件的所有可用 API。具体要求：
-
-- **属性覆盖**：每个常用的属性都应该有对应的示例展示其效果
-- **参数组合**：展示不同属性组合使用的效果，帮助用户理解属性之间的交互
-- **默认值对比**：对比使用默认值和自定义值的差异
-- **边界情况**：展示空值、无效值等边界情况的处理方式
-- **可选功能**：对于可选的功能（如链接、图标等），分别展示开启和关闭的效果
-
-**示例与 API 的对应关系检查表**：
-
-在编写示例时，应该建立以下对应关系：
-- 每个必填属性 → 至少有一个示例展示其必需性
-- 每个常用可选属性 → 至少有一个示例展示其效果
-- 每个特殊属性（如 className、style 等） → 有独立示例展示定制能力
-- 每个复杂属性（如对象、数组、函数等） → 有详细示例展示其用法
-- 每个枚举配置 → 有示例展示配置方式
-
-### 示例命名规范
-- 使用语义化的文件名，清晰表达示例的核心内容
-- 示例标题简洁明了，突出该示例的亮点
-- 示例描述说明该示例的使用场景和展示的功能
-
-### 示例类型规划
-根据组件特性，可能需要以下类型的示例：
-
-| 示例类型 | 说明 | 示例场景 |
-|---------|------|---------|
-| 基础用法 | 展示组件最基本的使用方式 | 简单的数据展示、基础配置 |
-| 功能特性 | 展示组件的核心功能和特性 | 表单编辑、数据加载、交互操作 |
-| 参数配置 | 展示不同参数的配置效果 | 尺寸变化、样式定制、行为控制 |
-| 高级用法 | 展示组件的高级功能或组合使用 | 自定义操作、复杂交互、数据联动 |
-| 实际场景 | 模拟真实业务场景 | 用户详情、项目管理、订单处理等 |
-
-### 数据真实性要求
-- **使用真实姓名**：如"张三"、"李四"等，避免"name1"、"用户A"
-- **合理业务数据**：部门用"技术部"、"产品部"，不用"部门1"、"部门2"
-- **有意义的内容**：描述文字应该表达真实的业务含义
-- **头像使用 dicebear**：如需头像，使用 `https://api.dicebear.com/7.x/avataaars/svg?seed=xxx`
-
-**错误示例 ❌**：
-```javascript
-const data = [
-  { label: "内容1", content: "这是内容1的描述" },
-  { label: "内容2", content: "这是内容2的描述" },
-];
-```
-
-**正确示例 ✅**：
-```javascript
-const data = [
-  { label: "前端开发组", content: "负责所有前端页面开发和维护工作" },
-  { label: "后端开发组", content: "负责API开发和服务器架构设计" },
-];
-```
-
-### API 模拟规范
-使用 DrawerButton 或 FetchButton 的示例，数据加载应该模拟真实的异步操作：
-```javascript
-api={{
-  loader: () => {
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        resolve(realData);  // 返回真实的业务数据
-      }, 500-1000);  // 模拟合理的网络延迟
-    });
-  },
-}}
-```
-
-## 8. 示例完整性检查
-
-### 示例覆盖度要求
-在编写完示例后，需要检查以下内容是否被充分覆盖：
-
-#### 必须覆盖的内容
-1. **主要组件**：所有导出的主要组件都应该有对应的示例
-2. **核心功能**：组件的核心功能点需要通过示例展示
-3. **所有 API 属性**：根据 API 文档，每个属性都应该在至少一个示例中展示其效果
-4. **常用属性**：常用的属性和配置项需要通过示例展示效果
-5. **典型场景**：至少包含 1-2 个真实的业务场景示例
-
-#### 补充示例的原则
-如果现有示例不足以完整演示 API，应该补充新的示例文件。判断标准：
-- 有子组件没有独立的示例
-- 有 API 文档中列出的属性没有在示例中展示
-- 有重要的 API 参数没有在示例中展示其效果
-- 有特殊使用场景（如自定义字段、组合使用）没有示例
-- 示例代码过于复杂，一个文件展示了太多功能，需要拆分
-- **API 覆盖度不足**：对照 API 文档检查，有未展示的属性或功能
-
-#### 补充示例的步骤
-1. **分析 API 文档**：仔细阅读 `doc/api.md`，列出所有属性、方法和配置项
-2. **对照现有示例**：检查每个 API 项是否已有示例展示，标记未覆盖的内容
-3. **设计新示例**：为每个未覆盖的 API 功能点设计独立的示例文件
-4. **示例文件命名**：应该清晰表达其展示的功能（如 `link.js`、`custom-style.js`）
-5. **更新配置**：更新 `example.json`，添加新的示例条目
-6. **验证完整性**：确保示例标题和描述准确表达示例内容，且能展示对应的 API
-
-#### 示例文件数量建议
-- **简单组件**：1-3 个示例文件即可
-- **中等复杂组件**：3-6 个示例文件
-- **复杂组件**（如 Filter）：6-10 个示例文件，覆盖各种子组件和高级用法
-
-#### 示例完整性检查清单
-在完成示例编写后，使用以下清单进行检查：
-
-- [ ] 所有导出的主要组件都有对应的示例
-- [ ] **所有 API 文档中列出的属性都有示例展示**
-- [ ] **每个常用属性都有独立示例展示其效果**
-- [ ] **每个可选配置（如链接、样式等）都有对比示例**
-- [ ] 至少有一个基础用法示例
-- [ ] 至少有一个真实业务场景的示例
-- [ ] 有组合使用或高级用法的示例（如果适用）
-- [ ] 示例文件命名清晰，能准确表达功能
-- [ ] 示例标题和描述准确表达示例内容
-- [ ] `example.json` 中的配置正确且完整
-- [ ] 所有示例代码都能正常运行
-- [ ] **对照 API 文档，确保没有遗漏的重要功能**
-
-## 9. FormInfo 组件示例特殊规则
-
-### 必须包裹 Form 避免上下文缺失
-**重要**：如果编写的示例使用了 FormInfo 的字段组件（如 `Input`、`TextArea`、`SuperSelect` 等），而该组件在实际使用中没有在 `Form` 或 `FormModal` 中包裹，编写示例时必须自行添加外层 `Form`，否则会因为上下文缺失而报错。
-
-### 标准 FormInfo 示例模板
-```javascript
-const { default: YourComponent } = _YourComponent;
-const { createWithRemoteLoader } = remoteLoader;
-
-const BaseExample = createWithRemoteLoader({
-  modules: ['components-core:FormInfo', 'components-core:Global@PureGlobal']
-})(({ remoteModules }) => {
-  const [FormInfo, PureGlobal] = remoteModules;
-  const { Form } = FormInfo;
-  const { Input, TextArea } = FormInfo.fields;
-
-  return (
-    <Form onSubmit={(data) => console.log(data)}>
-      <YourComponent />
-    </Form>
-  );
-});
-
-render(<BaseExample />);
-```
-
-### 错误示例 ❌
-```javascript
-// ❌ 错误：缺少外层 Form，会导致上下文缺失报错
-const BaseExample = createWithRemoteLoader({
-  modules: ['components-core:FormInfo']
-})(({ remoteModules }) => {
-  const [FormInfo] = remoteModules;
-  const { Input } = FormInfo.fields;
-
-  return (
-    <YourComponent>
-      <Input name="test" label="测试" />
-    </YourComponent>
-  );
-});
-```
-
-### 正确示例 ✅
-```javascript
-// ✅ 正确：添加外层 Form 避免上下文缺失
-const BaseExample = createWithRemoteLoader({
-  modules: ['components-core:FormInfo']
-})(({ remoteModules }) => {
-  const [FormInfo] = remoteModules;
-  const { Form } = FormInfo;
-  const { Input } = FormInfo.fields;
-
-  return (
-    <Form onSubmit={(data) => console.log(data)}>
-      <YourComponent>
-        <Input name="test" label="测试" />
-      </YourComponent>
-    </Form>
-  );
-});
-```
-
-### 判断是否需要添加 Form
-需要添加外层 `Form` 的情况：
-- 示例代码中直接使用了 `FormInfo.fields` 中的任何组件
-- 组件内部使用了 `useFormContext` Hook
-- 组件依赖表单上下文进行字段校验或数据绑定
-
-不需要添加外层 `Form` 的情况：
-- 组件本身就是一个完整的表单（内部已包含 `Form`）
-- 组件仅用于展示，不涉及表单字段
-- 组件已经在 `FormModal` 中使用
\ No newline at end of file
diff --git a/src/components/Apis/getApis.js b/src/components/Apis/getApis.js
index a8a990e..82899f1 100644
--- a/src/components/Apis/getApis.js
+++ b/src/components/Apis/getApis.js
@@ -501,6 +501,10 @@ const getApis = options => {
         detail: {
           url: `${prefix}/message/templates/:id`,
           method: 'GET'
+        },
+        send: {
+          url: `${prefix}/message/templates/send`,
+          method: 'POST'
         }
       }
     },
diff --git a/src/components/MessageManger/Actions/Detail.js b/src/components/MessageManger/Actions/Detail.js
new file mode 100644
index 0000000..49ad04a
--- /dev/null
+++ b/src/components/MessageManger/Actions/Detail.js
@@ -0,0 +1,30 @@
+import { createWithRemoteLoader } from '@kne/remote-loader';
+import { Button } from 'antd';
+import withLocale from '../withLocale';
+import { useIntl } from '@kne/react-intl';
+import DetailContent from '../DetailContent';
+
+const DetailInner = createWithRemoteLoader({
+  modules: ['components-core:Modal@useModal']
+})(({ remoteModules, data, detailType, ...props }) => {
+  const [useModal] = remoteModules;
+  const { formatMessage } = useIntl();
+  const modal = useModal();
+
+  return (
+    <Button
+      {...props}
+      onClick={() => {
+        modal({
+          title: formatMessage({ id: detailType === 'record' ? 'RecordDetail' : 'TemplateDetail' }),
+          width: 760,
+          footer: null,
+          children: <DetailContent data={data} type={detailType} />
+        });
+      }}
+    />
+  );
+});
+
+const Detail = withLocale(DetailInner);
+export default Detail;
diff --git a/src/components/MessageManger/Actions/Resend.js b/src/components/MessageManger/Actions/Resend.js
new file mode 100644
index 0000000..9a39930
--- /dev/null
+++ b/src/components/MessageManger/Actions/Resend.js
@@ -0,0 +1,49 @@
+import { createWithRemoteLoader } from '@kne/remote-loader';
+import { App, Button } from 'antd';
+import withLocale from '../withLocale';
+import { useIntl } from '@kne/react-intl';
+import MessageFormInner from '../MessageFormInner';
+
+const ResendInner = createWithRemoteLoader({
+  modules: ['components-core:Global@usePreset', 'components-core:FormInfo@useFormModal']
+})(({ remoteModules, data, detailType, onSuccess, ...props }) => {
+  const [usePreset, useFormModal] = remoteModules;
+  const { apis, ajax } = usePreset();
+  const { formatMessage } = useIntl();
+  const { message } = App.useApp();
+  const formModal = useFormModal();
+
+  return (
+    <Button
+      {...props}
+      onClick={() => {
+        formModal({
+          title: formatMessage({ id: 'Resend' }),
+          formProps: {
+            data: { name: data.name, props: JSON.stringify(data.props || {}, null, 2) },
+            onSubmit: async formData => {
+              const { data: resData } = await ajax(
+                Object.assign({}, apis.messageManger.templates.send, {
+                  data: {
+                    templateId: data.templateId,
+                    name: formData.name,
+                    props: JSON.parse(formData.props)
+                  }
+                })
+              );
+              if (resData.code !== 0) {
+                return false;
+              }
+              message.success(formatMessage({ id: 'SendMessageSuccess' }));
+              onSuccess && onSuccess();
+            }
+          },
+          children: <MessageFormInner data={data} />
+        });
+      }}
+    />
+  );
+});
+
+const Resend = withLocale(ResendInner);
+export default Resend;
diff --git a/src/components/MessageManger/Actions/SendMessage.js b/src/components/MessageManger/Actions/SendMessage.js
new file mode 100644
index 0000000..aa78c02
--- /dev/null
+++ b/src/components/MessageManger/Actions/SendMessage.js
@@ -0,0 +1,59 @@
+import { createWithRemoteLoader } from '@kne/remote-loader';
+import { App, Button } from 'antd';
+import { useNavigate } from 'react-router-dom';
+import withLocale from '../withLocale';
+import { useIntl } from '@kne/react-intl';
+import MessageFormInner from '../MessageFormInner';
+
+const SendMessageInner = createWithRemoteLoader({
+  modules: ['components-core:Global@usePreset', 'components-core:FormInfo@useFormModal']
+})(({ remoteModules, data, detailType, onSuccess, ...props }) => {
+  const [usePreset, useFormModal] = remoteModules;
+  const { apis, ajax } = usePreset();
+  const { formatMessage } = useIntl();
+  const { message } = App.useApp();
+  const formModal = useFormModal();
+  const navigate = useNavigate();
+
+  const handleSuccess = () => {
+    if (detailType === 'template') {
+      navigate('./records');
+    } else {
+      onSuccess && onSuccess();
+    }
+  };
+
+  return (
+    <Button
+      {...props}
+      onClick={() => {
+        formModal({
+          title: formatMessage({ id: 'SendMessage' }),
+          formProps: {
+            data: { props: '{}' },
+            onSubmit: async formData => {
+              const { data: resData } = await ajax(
+                Object.assign({}, apis.messageManger.templates.send, {
+                  data: {
+                    templateId: data.id,
+                    name: formData.name,
+                    props: JSON.parse(formData.props)
+                  }
+                })
+              );
+              if (resData.code !== 0) {
+                return false;
+              }
+              message.success(formatMessage({ id: 'SendMessageSuccess' }));
+              handleSuccess();
+            }
+          },
+          children: <MessageFormInner data={data} />
+        });
+      }}
+    />
+  );
+});
+
+const SendMessage = withLocale(SendMessageInner);
+export default SendMessage;
diff --git a/src/components/MessageManger/Actions/index.js b/src/components/MessageManger/Actions/index.js
new file mode 100644
index 0000000..51024df
--- /dev/null
+++ b/src/components/MessageManger/Actions/index.js
@@ -0,0 +1,56 @@
+import { createWithRemoteLoader } from '@kne/remote-loader';
+import withLocale from '../withLocale';
+import { useIntl } from '@kne/react-intl';
+import Detail from './Detail';
+import SendMessage from './SendMessage';
+import Resend from './Resend';
+
+const ActionsInner = createWithRemoteLoader({
+  modules: ['components-core:ButtonGroup']
+})(({ remoteModules, children, data, detailType, onSuccess, moreType = 'link', itemClassName, ...props }) => {
+  const [ButtonGroup] = remoteModules;
+  const { formatMessage } = useIntl();
+  const list = [];
+
+  list.push({
+    ...props,
+    buttonComponent: Detail,
+    data,
+    detailType,
+    children: formatMessage({ id: 'Detail' }),
+    onSuccess
+  });
+
+  if (detailType !== 'record' && Number(data.status) === 0) {
+    list.push({
+      ...props,
+      buttonComponent: SendMessage,
+      data,
+      detailType,
+      children: formatMessage({ id: 'SendMessage' }),
+      onSuccess
+    });
+  }
+
+  if (detailType === 'record') {
+    list.push({
+      ...props,
+      buttonComponent: Resend,
+      data,
+      detailType,
+      children: formatMessage({ id: 'Resend' }),
+      onSuccess
+    });
+  }
+
+  if (typeof children === 'function') {
+    return children({ list });
+  }
+
+  return <ButtonGroup itemClassName={itemClassName} list={list} moreType={moreType} />;
+});
+
+const Actions = withLocale(ActionsInner);
+
+export { Detail, SendMessage, Resend };
+export default Actions;
diff --git a/src/components/MessageManger/DetailContent/DetailContent.js b/src/components/MessageManger/DetailContent/DetailContent.js
new file mode 100644
index 0000000..bb82b89
--- /dev/null
+++ b/src/components/MessageManger/DetailContent/DetailContent.js
@@ -0,0 +1,57 @@
+import { Descriptions, Space, Tag } from 'antd';
+import { useIntl } from '@kne/react-intl';
+import dayjs from 'dayjs';
+import withLocale from '../withLocale';
+import { MESSAGE_TYPE_COLORS } from '../enums';
+import PropsView from './PropsView';
+import EmailContent from './EmailContent';
+import SmsContent from './SmsContent';
+
+const DetailContent = withLocale(({ data, type }) => {
+  const { formatMessage } = useIntl();
+  const isRecord = type === 'record';
+  const isEmail = Number(data?.type) === 0;
+  const content = data?.content || {};
+  const props = data?.props || {};
+
+  return (
+    <Space direction="vertical" size={16} style={{ width: '100%' }}>
+      <Descriptions bordered column={2} size="small">
+        <Descriptions.Item label={formatMessage({ id: 'ID' })}>{data?.id}</Descriptions.Item>
+        <Descriptions.Item label={formatMessage({ id: 'Code' })}>{data?.code || '-'}</Descriptions.Item>
+        <Descriptions.Item label={formatMessage({ id: isRecord ? 'Target' : 'Name' })}>{data?.name || '-'}</Descriptions.Item>
+        <Descriptions.Item label={formatMessage({ id: 'Type' })}>
+          <Tag color={MESSAGE_TYPE_COLORS[data?.type] || 'default'}>{formatMessage({ id: Number(data?.type) === 1 ? 'SMS' : 'Email' })}</Tag>
+        </Descriptions.Item>
+        {isRecord ? <Descriptions.Item label={formatMessage({ id: 'TemplateId' })} span={2}>{data?.templateId || '-'}</Descriptions.Item> : null}
+        {!isRecord ? <Descriptions.Item label={formatMessage({ id: 'Level' })}>{formatMessage({ id: Number(data?.level) === 1 ? 'Business' : 'System' })}</Descriptions.Item> : null}
+        {!isRecord ? <Descriptions.Item label={formatMessage({ id: 'Status' })}>{formatMessage({ id: Number(data?.status) === 1 ? 'Disabled' : 'Enabled' })}</Descriptions.Item> : null}
+        <Descriptions.Item label={formatMessage({ id: 'CreatedAt' })} span={isRecord ? 2 : 1}>{data?.createdAt ? dayjs(data.createdAt).format('YYYY-MM-DD HH:mm:ss') : '-'}</Descriptions.Item>
+      </Descriptions>
+      {isRecord ? (
+        <>
+          <PropsView props={props} formatMessage={formatMessage} />
+          {Object.keys(content).length > 0 && (
+            <div>
+              <strong>{formatMessage({ id: 'Content' })}</strong>
+              <div style={{ marginTop: 8 }}>
+                {isEmail ? (
+                  <EmailContent content={content} formatMessage={formatMessage} />
+                ) : (
+                  <SmsContent content={content} formatMessage={formatMessage} />
+                )}
+              </div>
+            </div>
+          )}
+        </>
+      ) : (
+        <div>
+          <strong>{formatMessage({ id: 'Content' })}</strong>
+          <pre style={{ marginTop: 8, padding: 12, background: '#f5f5f5', whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>{data?.content || '-'}</pre>
+        </div>
+      )}
+    </Space>
+  );
+});
+
+export default DetailContent;
diff --git a/src/components/MessageManger/DetailContent/EmailContent.js b/src/components/MessageManger/DetailContent/EmailContent.js
new file mode 100644
index 0000000..f4de626
--- /dev/null
+++ b/src/components/MessageManger/DetailContent/EmailContent.js
@@ -0,0 +1,47 @@
+import { Descriptions, Tabs } from 'antd';
+import JsonView from '@kne/json-view';
+import HtmlPreview from './HtmlPreview';
+import PlainTextView from './PlainTextView';
+
+const EmailContent = ({ content, formatMessage }) => {
+  const items = [];
+  if (content.subject) {
+    items.push({ key: 'subject', label: formatMessage({ id: 'Subject' }), children: content.subject });
+  }
+  if (content.from) {
+    items.push({ key: 'from', label: formatMessage({ id: 'From' }), children: content.from });
+  }
+  if (content.to) {
+    items.push({ key: 'to', label: formatMessage({ id: 'To' }), children: content.to });
+  }
+  if (content.attachments && content.attachments.length > 0) {
+    items.push({ key: 'attachments', label: formatMessage({ id: 'Attachments' }), children: <JsonView data={content.attachments} theme="light" collapsedFrom={1} /> });
+  }
+
+  const tabItems = [];
+  if (content.html) {
+    tabItems.push({ key: 'html', label: formatMessage({ id: 'HtmlPreview' }), children: <HtmlPreview html={content.html} /> });
+  }
+  if (content.text) {
+    tabItems.push({ key: 'text', label: formatMessage({ id: 'PlainText' }), children: <PlainTextView text={content.text} /> });
+  }
+
+  return (
+    <>
+      {items.length > 0 && (
+        <Descriptions bordered column={1} size="small">
+          {items.map(item => (
+            <Descriptions.Item key={item.key} label={item.label}>{item.children}</Descriptions.Item>
+          ))}
+        </Descriptions>
+      )}
+      {tabItems.length > 0 && (
+        <div style={{ marginTop: 12 }}>
+          <Tabs items={tabItems} size="small" />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default EmailContent;
diff --git a/src/components/MessageManger/DetailContent/HtmlPreview.js b/src/components/MessageManger/DetailContent/HtmlPreview.js
new file mode 100644
index 0000000..ef32e6c
--- /dev/null
+++ b/src/components/MessageManger/DetailContent/HtmlPreview.js
@@ -0,0 +1,40 @@
+import { useRef, useState, useEffect, useCallback } from 'react';
+
+const HtmlPreview = ({ html }) => {
+  const iframeRef = useRef(null);
+  const [iframeHeight, setIframeHeight] = useState(300);
+
+  const handleLoad = useCallback(() => {
+    try {
+      const doc = iframeRef.current?.contentDocument;
+      if (doc?.body) {
+        const height = Math.max(doc.documentElement.scrollHeight, doc.body.scrollHeight, 200);
+        setIframeHeight(height);
+      }
+    } catch (e) {
+      // cross-origin fallback
+    }
+  }, []);
+
+  useEffect(() => {
+    if (iframeRef.current && html) {
+      const doc = iframeRef.current.contentDocument;
+      doc.open();
+      doc.write(`<style>html,body{margin:0;padding:12px;overflow:hidden;}</style>${html}`);
+      doc.close();
+      handleLoad();
+    }
+  }, [html, handleLoad]);
+
+  return (
+    <iframe
+      ref={iframeRef}
+      onLoad={handleLoad}
+      style={{ width: '100%', height: iframeHeight, border: '1px solid #d9d9d9', borderRadius: 6, background: '#fff' }}
+      title="HTML Preview"
+      sandbox="allow-same-origin"
+    />
+  );
+};
+
+export default HtmlPreview;
diff --git a/src/components/MessageManger/DetailContent/PlainTextView.js b/src/components/MessageManger/DetailContent/PlainTextView.js
new file mode 100644
index 0000000..4a9e0bb
--- /dev/null
+++ b/src/components/MessageManger/DetailContent/PlainTextView.js
@@ -0,0 +1,10 @@
+const PlainTextView = ({ text }) => {
+  if (!text) return null;
+  return (
+    <pre style={{ margin: 0, padding: 12, background: '#f5f5f5', whiteSpace: 'pre-wrap', wordBreak: 'break-word', borderRadius: 6, border: '1px solid #d9d9d9', fontSize: 13, lineHeight: 1.6 }}>
+      {text}
+    </pre>
+  );
+};
+
+export default PlainTextView;
diff --git a/src/components/MessageManger/DetailContent/PropsView.js b/src/components/MessageManger/DetailContent/PropsView.js
new file mode 100644
index 0000000..208f6ac
--- /dev/null
+++ b/src/components/MessageManger/DetailContent/PropsView.js
@@ -0,0 +1,23 @@
+import { Descriptions } from 'antd';
+import JsonView from '@kne/json-view';
+import '@kne/json-view/dist/index.css';
+
+const PropsView = ({ props: propsData, formatMessage }) => {
+  if (!propsData || Object.keys(propsData).length === 0) return null;
+  const entries = Object.entries(propsData);
+  const hasJsonObject = entries.some(([, value]) => typeof value === 'object');
+  return (
+    <div>
+      <strong>{formatMessage({ id: 'Props' })}</strong>
+      <Descriptions bordered column={hasJsonObject ? 1 : 2} size="small" style={{ marginTop: 8 }}>
+        {entries.map(([key, value]) => (
+          <Descriptions.Item key={key} label={key}>
+            {typeof value === 'object' ? <JsonView data={value} collapsedFrom={1} theme="light" /> : String(value)}
+          </Descriptions.Item>
+        ))}
+      </Descriptions>
+    </div>
+  );
+};
+
+export default PropsView;
diff --git a/src/components/MessageManger/DetailContent/SmsContent.js b/src/components/MessageManger/DetailContent/SmsContent.js
new file mode 100644
index 0000000..f3c9575
--- /dev/null
+++ b/src/components/MessageManger/DetailContent/SmsContent.js
@@ -0,0 +1,28 @@
+import JsonView from '@kne/json-view';
+import PlainTextView from './PlainTextView';
+
+const SmsContent = ({ content, formatMessage }) => {
+  const smsText = content?.content?.text;
+  const signature = content?.content?.signature;
+
+  return (
+    <>
+      {smsText && <PlainTextView text={smsText} />}
+      {signature && (
+        <div style={{ marginTop: 8, color: '#666', fontSize: 13 }}>
+          {formatMessage({ id: 'Signature' })}: {signature}
+        </div>
+      )}
+      {content?.result && (
+        <div style={{ marginTop: 12 }}>
+          <strong>{formatMessage({ id: 'Result' })}</strong>
+          <div style={{ marginTop: 8 }}>
+            <JsonView theme="light" data={(() => { try { return JSON.parse(content.result); } catch { return content.result; } })()} collapsedFrom={1} />
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default SmsContent;
diff --git a/src/components/MessageManger/DetailContent/index.js b/src/components/MessageManger/DetailContent/index.js
new file mode 100644
index 0000000..0954ccc
--- /dev/null
+++ b/src/components/MessageManger/DetailContent/index.js
@@ -0,0 +1,6 @@
+export { default as HtmlPreview } from './HtmlPreview';
+export { default as PlainTextView } from './PlainTextView';
+export { default as PropsView } from './PropsView';
+export { default as EmailContent } from './EmailContent';
+export { default as SmsContent } from './SmsContent';
+export { default } from './DetailContent';
diff --git a/src/components/MessageManger/Menu.js b/src/components/MessageManger/Menu.js
new file mode 100644
index 0000000..ca0c591
--- /dev/null
+++ b/src/components/MessageManger/Menu.js
@@ -0,0 +1,24 @@
+import { createWithRemoteLoader } from '@kne/remote-loader';
+import withLocale from './withLocale';
+import { useIntl } from '@kne/react-intl';
+
+const MessageMenu = createWithRemoteLoader({
+  modules: ['components-core:Menu']
+})(
+  withLocale(({ remoteModules, baseUrl }) => {
+    const [Menu] = remoteModules;
+    const { formatMessage } = useIntl();
+    const rootPath = baseUrl || '';
+
+    return (
+      <Menu
+        items={[
+          { label: formatMessage({ id: 'TemplateList' }), key: 'templates', path: rootPath },
+          { label: formatMessage({ id: 'RecordList' }), key: 'records', path: `${rootPath}/records` }
+        ]}
+      />
+    );
+  })
+);
+
+export default MessageMenu;
diff --git a/src/components/MessageManger/MessageFormInner.js b/src/components/MessageManger/MessageFormInner.js
new file mode 100644
index 0000000..c7f1fd7
--- /dev/null
+++ b/src/components/MessageManger/MessageFormInner.js
@@ -0,0 +1,68 @@
+import { createWithRemoteLoader } from '@kne/remote-loader';
+import { Alert } from 'antd';
+import { useIntl } from '@kne/react-intl';
+
+const extractVariables = content => {
+  if (!content || typeof content !== 'string') return [];
+  const matches = content.matchAll(/\{\{(\w+)\}\}/g);
+  return [...new Set(Array.from(matches, m => m[1]))];
+};
+
+const MessageFormInner = createWithRemoteLoader({
+  modules: ['components-core:FormInfo', 'components-thirdparty:JSONEditor']
+})(({ remoteModules, data }) => {
+  const [FormInfo, JSONEditor] = remoteModules;
+  const { fields } = FormInfo;
+  const { Input, PhoneNumber } = fields;
+  const { formatMessage } = useIntl();
+  const isSMS = data.type === 1;
+  const contentStr = typeof data.content === 'string' ? data.content : '';
+  const variables = extractVariables(contentStr);
+  const propsExample = variables.length > 0 ? Object.fromEntries(variables.map(key => [key, ''])) : {};
+
+  return (
+    <>
+      <FormInfo
+        column={1}
+        list={[
+          isSMS ? (
+            <PhoneNumber name="name" label={formatMessage({ id: 'PhoneNumber' })} rule="REQ" format="string" />
+          ) : (
+            <Input name="name" label={formatMessage({ id: 'EmailAddress' })} rule="REQ" />
+          )
+        ]}
+      />
+      {contentStr ? (
+        <div style={{ marginBottom: 16 }}>
+          <div style={{ marginBottom: 4, fontWeight: 600, fontSize: 14 }}>{formatMessage({ id: 'TemplateContent' })}</div>
+          <pre
+            style={{
+              margin: 0,
+              padding: 8,
+              background: '#f5f5f5',
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-word',
+              fontSize: 12,
+              maxHeight: 200,
+              overflow: 'auto'
+            }}>
+            {contentStr}
+          </pre>
+        </div>
+      ) : null}
+      {variables.length > 0 ? (
+        <Alert
+          type="info"
+          message={formatMessage({ id: 'PropsTip' }, { example: JSON.stringify(propsExample, null, 2) })}
+          style={{ marginBottom: 16 }}
+        />
+      ) : null}
+      <FormInfo
+        column={1}
+        list={[<JSONEditor name="props" label={formatMessage({ id: 'Props' })} placeholder={formatMessage({ id: 'PropsPlaceholder' })} />]}
+      />
+    </>
+  );
+});
+
+export default MessageFormInner;
diff --git a/src/components/MessageManger/enums.js b/src/components/MessageManger/enums.js
new file mode 100644
index 0000000..3f0d9a3
--- /dev/null
+++ b/src/components/MessageManger/enums.js
@@ -0,0 +1,28 @@
+const MESSAGE_TYPE_ENUM = [
+  { value: 0, description: '邮件', label: 'Email', type: 'blue' },
+  { value: 1, description: '短信', label: 'SMS', type: 'green' }
+];
+
+const MESSAGE_TEMPLATE_LEVEL_ENUM = [
+  { value: 0, description: '系统', label: 'System', type: 'blue' },
+  { value: 1, description: '业务', label: 'Business', type: 'purple' }
+];
+
+const MESSAGE_TEMPLATE_STATUS_ENUM = [
+  { value: 0, description: '启用', label: 'Enabled', type: 'green' },
+  { value: 1, description: '禁用', label: 'Disabled', type: 'default' }
+];
+
+const MESSAGE_TYPE_COLORS = {
+  0: 'blue',
+  1: 'green'
+};
+
+const enums = {
+  messageManagerType: MESSAGE_TYPE_ENUM,
+  messageTemplateLevel: MESSAGE_TEMPLATE_LEVEL_ENUM,
+  messageTemplateStatus: MESSAGE_TEMPLATE_STATUS_ENUM
+};
+
+export { MESSAGE_TYPE_COLORS };
+export default enums;
diff --git a/src/components/MessageManger/getColumns.js b/src/components/MessageManger/getColumns.js
new file mode 100644
index 0000000..417c0e4
--- /dev/null
+++ b/src/components/MessageManger/getColumns.js
@@ -0,0 +1,79 @@
+import { Tag } from 'antd';
+import withLocale from './withLocale';
+import { useIntl } from '@kne/react-intl';
+import { MESSAGE_TYPE_COLORS } from './enums';
+import Actions from './Actions';
+
+const renderEnumTag = ({ formatMessage, value, moduleName }) => {
+  if (moduleName === 'messageManagerType') {
+    return <Tag color={MESSAGE_TYPE_COLORS[value] || 'default'}>{formatMessage({ id: Number(value) === 1 ? 'SMS' : 'Email' })}</Tag>;
+  }
+  if (moduleName === 'messageTemplateLevel') {
+    return <Tag color={Number(value) === 1 ? 'purple' : 'blue'}>{formatMessage({ id: Number(value) === 1 ? 'Business' : 'System' })}</Tag>;
+  }
+  return <Tag color={Number(value) === 1 ? 'default' : 'green'}>{formatMessage({ id: Number(value) === 1 ? 'Disabled' : 'Enabled' })}</Tag>;
+};
+
+const getTemplateColumns = ({ formatMessage, onSuccess }) => [
+  { name: 'name', title: formatMessage({ id: 'Name' }), type: 'mainInfo' },
+  { name: 'code', title: formatMessage({ id: 'Code' }) },
+  {
+    name: 'type',
+    title: formatMessage({ id: 'Type' }),
+    valueOf: item => renderEnumTag({ formatMessage, value: item.type, moduleName: 'messageManagerType' })
+  },
+  {
+    name: 'level',
+    title: formatMessage({ id: 'Level' }),
+    valueOf: item => renderEnumTag({ formatMessage, value: item.level, moduleName: 'messageTemplateLevel' })
+  },
+  {
+    name: 'status',
+    title: formatMessage({ id: 'Status' }),
+    valueOf: item => renderEnumTag({ formatMessage, value: item.status, moduleName: 'messageTemplateStatus' })
+  },
+  { name: 'createdAt', title: formatMessage({ id: 'CreatedAt' }), type: 'datetime' },
+  {
+    name: 'options',
+    title: formatMessage({ id: 'Operation' }),
+    type: 'options',
+    fixed: 'right',
+    valueOf: item => ({
+      children: <Actions type="link" detailType="template" data={item} onSuccess={onSuccess} />
+    })
+  }
+];
+
+const getRecordColumns = ({ formatMessage, onSuccess }) => [
+  { name: 'name', title: formatMessage({ id: 'Target' }), type: 'mainInfo' },
+  { name: 'code', title: formatMessage({ id: 'Code' }) },
+  {
+    name: 'type',
+    title: formatMessage({ id: 'Type' }),
+    valueOf: item => renderEnumTag({ formatMessage, value: item.type, moduleName: 'messageManagerType' })
+  },
+  { name: 'templateId', title: formatMessage({ id: 'TemplateId' }) },
+  { name: 'createdAt', title: formatMessage({ id: 'CreatedAt' }), type: 'datetime' },
+  {
+    name: 'options',
+    title: formatMessage({ id: 'Operation' }),
+    type: 'options',
+    fixed: 'right',
+    valueOf: item => ({
+      children: <Actions type="link" detailType="record" data={item} onSuccess={onSuccess} />
+    })
+  }
+];
+
+export const TemplateColumnsLoader = withLocale(({ children }) => {
+  const { formatMessage } = useIntl();
+  return children(props => getTemplateColumns(Object.assign({}, props, { formatMessage })));
+});
+
+export const RecordColumnsLoader = withLocale(({ children }) => {
+  const { formatMessage } = useIntl();
+  return children(props => getRecordColumns(Object.assign({}, props, { formatMessage })));
+});
+
+export { getTemplateColumns, getRecordColumns, renderEnumTag };
+export default getTemplateColumns;
diff --git a/src/components/MessageManger/index.js b/src/components/MessageManger/index.js
index fcc410e..f67d13e 100644
--- a/src/components/MessageManger/index.js
+++ b/src/components/MessageManger/index.js
@@ -1,164 +1,24 @@
 import { createWithRemoteLoader } from '@kne/remote-loader';
 import AppChildrenRouter from '@kne/app-children-router';
-import { Button, Descriptions, Space, Tag } from 'antd';
-import JsonView from '@kne/json-view';
-import '@kne/json-view/dist/index.css';
 import { useIntl } from '@kne/react-intl';
 import { useRef, useState } from 'react';
 import withLocale from './withLocale';
 import { buildMessageParams } from './utils';
-
-const MESSAGE_TYPE_COLORS = {
-  0: 'blue',
-  1: 'green'
-};
-
-const DetailContent = withLocale(({ data, type }) => {
-  const { formatMessage } = useIntl();
-  const isRecord = type === 'record';
-
-  return (
-    <Space direction="vertical" size={16} style={{ width: '100%' }}>
-      <Descriptions bordered column={2} size="small">
-        <Descriptions.Item label={formatMessage({ id: 'ID' })}>{data?.id}</Descriptions.Item>
-        <Descriptions.Item label={formatMessage({ id: 'Code' })}>{data?.code || '-'}</Descriptions.Item>
-        <Descriptions.Item label={formatMessage({ id: isRecord ? 'Target' : 'Name' })}>{isRecord ? data?.name : data?.name || '-'}</Descriptions.Item>
-        <Descriptions.Item label={formatMessage({ id: 'Type' })}>{formatMessage({ id: Number(data?.type) === 1 ? 'SMS' : 'Email' })}</Descriptions.Item>
-        {isRecord ? <Descriptions.Item label={formatMessage({ id: 'TemplateId' })}>{data?.templateId || '-'}</Descriptions.Item> : null}
-        {!isRecord ? <Descriptions.Item label={formatMessage({ id: 'Level' })}>{formatMessage({ id: Number(data?.level) === 1 ? 'Business' : 'System' })}</Descriptions.Item> : null}
-        {!isRecord ? <Descriptions.Item label={formatMessage({ id: 'Status' })}>{formatMessage({ id: Number(data?.status) === 1 ? 'Disabled' : 'Enabled' })}</Descriptions.Item> : null}
-        <Descriptions.Item label={formatMessage({ id: 'CreatedAt' })}>{data?.createdAt || '-'}</Descriptions.Item>
-      </Descriptions>
-      {isRecord ? (
-        <>
-          <div>
-            <strong>{formatMessage({ id: 'Props' })}</strong>
-            <JsonView data={data?.props || {}} collapsedFrom={1} />
-          </div>
-          <div>
-            <strong>{formatMessage({ id: 'Content' })}</strong>
-            <JsonView data={data?.content || {}} collapsedFrom={1} />
-          </div>
-        </>
-      ) : (
-        <div>
-          <strong>{formatMessage({ id: 'Content' })}</strong>
-          <pre style={{ marginTop: 8, padding: 12, background: '#f5f5f5', whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>{data?.content || '-'}</pre>
-        </div>
-      )}
-    </Space>
-  );
-});
-
-const MessageMenu = createWithRemoteLoader({
-  modules: ['components-core:Menu']
-})(
-  withLocale(({ remoteModules, baseUrl }) => {
-    const [Menu] = remoteModules;
-    const { formatMessage } = useIntl();
-    const rootPath = baseUrl || '';
-
-    return (
-      <Menu
-        items={[
-          { label: formatMessage({ id: 'TemplateList' }), key: 'templates', path: rootPath },
-          { label: formatMessage({ id: 'RecordList' }), key: 'records', path: `${rootPath}/records` }
-        ]}
-      />
-    );
-  })
-);
-
-const renderEnumTag = ({ formatMessage, value, moduleName }) => {
-  if (moduleName === 'messageManagerType') {
-    return <Tag color={MESSAGE_TYPE_COLORS[value] || 'default'}>{formatMessage({ id: Number(value) === 1 ? 'SMS' : 'Email' })}</Tag>;
-  }
-  if (moduleName === 'messageTemplateLevel') {
-    return <Tag color={Number(value) === 1 ? 'purple' : 'blue'}>{formatMessage({ id: Number(value) === 1 ? 'Business' : 'System' })}</Tag>;
-  }
-  return <Tag color={Number(value) === 1 ? 'default' : 'green'}>{formatMessage({ id: Number(value) === 1 ? 'Disabled' : 'Enabled' })}</Tag>;
-};
-
-const getTemplateColumns = ({ formatMessage, openDetail }) => [
-  { name: 'name', title: formatMessage({ id: 'Name' }), type: 'mainInfo' },
-  { name: 'code', title: formatMessage({ id: 'Code' }) },
-  {
-    name: 'type',
-    title: formatMessage({ id: 'Type' }),
-    valueOf: item => renderEnumTag({ formatMessage, value: item.type, moduleName: 'messageManagerType' })
-  },
-  {
-    name: 'level',
-    title: formatMessage({ id: 'Level' }),
-    valueOf: item => renderEnumTag({ formatMessage, value: item.level, moduleName: 'messageTemplateLevel' })
-  },
-  {
-    name: 'status',
-    title: formatMessage({ id: 'Status' }),
-    valueOf: item => renderEnumTag({ formatMessage, value: item.status, moduleName: 'messageTemplateStatus' })
-  },
-  { name: 'createdAt', title: formatMessage({ id: 'CreatedAt' }), type: 'datetime' },
-  {
-    name: 'options',
-    title: formatMessage({ id: 'Operation' }),
-    type: 'options',
-    fixed: 'right',
-    valueOf: item => ({
-      children: (
-        <Button type="link" onClick={() => openDetail(item, 'template')}>
-          {formatMessage({ id: 'Detail' })}
-        </Button>
-      )
-    })
-  }
-];
-
-const getRecordColumns = ({ formatMessage, openDetail }) => [
-  { name: 'name', title: formatMessage({ id: 'Target' }), type: 'mainInfo' },
-  { name: 'code', title: formatMessage({ id: 'Code' }) },
-  {
-    name: 'type',
-    title: formatMessage({ id: 'Type' }),
-    valueOf: item => renderEnumTag({ formatMessage, value: item.type, moduleName: 'messageManagerType' })
-  },
-  { name: 'templateId', title: formatMessage({ id: 'TemplateId' }) },
-  { name: 'createdAt', title: formatMessage({ id: 'CreatedAt' }), type: 'datetime' },
-  {
-    name: 'options',
-    title: formatMessage({ id: 'Operation' }),
-    type: 'options',
-    fixed: 'right',
-    valueOf: item => ({
-      children: (
-        <Button type="link" onClick={() => openDetail(item, 'record')}>
-          {formatMessage({ id: 'Detail' })}
-        </Button>
-      )
-    })
-  }
-];
+import MessageMenu from './Menu';
+import { getTemplateColumns, getRecordColumns } from './getColumns';
 
 const TemplateList = createWithRemoteLoader({
-  modules: ['components-core:Layout@TablePage', 'components-core:Global@usePreset', 'components-core:Filter', 'components-core:Enum', 'components-core:Modal@useModal']
+  modules: ['components-core:Layout@TablePage', 'components-core:Global@usePreset', 'components-core:Filter', 'components-core:Enum']
 })(
   withLocale(({ remoteModules, baseUrl, pageProps = {} }) => {
-    const [TablePage, usePreset, Filter, Enum, useModal] = remoteModules;
+    const [TablePage, usePreset, Filter, Enum] = remoteModules;
     const { apis } = usePreset();
     const { formatMessage } = useIntl();
     const { SearchInput, getFilterValue, fields: filterFields } = Filter;
     const { InputFilterItem, SuperSelectFilterItem } = filterFields;
-    const modal = useModal();
     const ref = useRef(null);
     const [filter, setFilter] = useState([]);
     const filterValue = getFilterValue(filter);
-    const openDetail = data => {
-      modal({
-        title: formatMessage({ id: 'TemplateDetail' }),
-        width: 760,
-        footer: null,
-        children: <DetailContent data={data} type="template" />
-      });
-    };
 
     return (
       <TablePage
@@ -168,7 +28,7 @@ const TemplateList = createWithRemoteLoader({
         ref={ref}
         pagination={{ paramsType: 'params' }}
         name="message-manger-template-list"
-        columns={getTemplateColumns({ formatMessage, openDetail })}
+        columns={getTemplateColumns({ formatMessage, onSuccess: () => ref.current?.refresh() })}
         page={{
           filter: {
             value: filter,
@@ -219,26 +79,17 @@ const TemplateList = createWithRemoteLoader({
 );
 
 const RecordList = createWithRemoteLoader({
-  modules: ['components-core:Layout@TablePage', 'components-core:Global@usePreset', 'components-core:Filter', 'components-core:Enum', 'components-core:Modal@useModal']
+  modules: ['components-core:Layout@TablePage', 'components-core:Global@usePreset', 'components-core:Filter', 'components-core:Enum']
 })(
   withLocale(({ remoteModules, baseUrl, pageProps = {} }) => {
-    const [TablePage, usePreset, Filter, Enum, useModal] = remoteModules;
+    const [TablePage, usePreset, Filter, Enum] = remoteModules;
     const { apis } = usePreset();
     const { formatMessage } = useIntl();
     const { SearchInput, getFilterValue, fields: filterFields } = Filter;
     const { InputFilterItem, SuperSelectFilterItem } = filterFields;
-    const modal = useModal();
     const ref = useRef(null);
     const [filter, setFilter] = useState([]);
     const filterValue = getFilterValue(filter);
-    const openDetail = data => {
-      modal({
-        title: formatMessage({ id: 'RecordDetail' }),
-        width: 760,
-        footer: null,
-        children: <DetailContent data={data} type="record" />
-      });
-    };
 
     return (
       <TablePage
@@ -248,7 +99,7 @@ const RecordList = createWithRemoteLoader({
         ref={ref}
         pagination={{ paramsType: 'params' }}
         name="message-manger-record-list"
-        columns={getRecordColumns({ formatMessage, openDetail })}
+        columns={getRecordColumns({ formatMessage, onSuccess: () => ref.current?.refresh() })}
         page={{
           filter: {
             value: filter,
@@ -281,7 +132,7 @@ const RecordList = createWithRemoteLoader({
 
 const MessageManger = ({ baseUrl, children, ...props }) => {
   return (
-    <AppChildrenRouter
+    <AppChildrenRouter baseUrl={baseUrl}
       list={[
         { index: true, element: <TemplateList {...props} baseUrl={baseUrl} /> },
         { path: 'records', element: <RecordList {...props} baseUrl={baseUrl} /> }
@@ -294,3 +145,7 @@ const MessageManger = ({ baseUrl, children, ...props }) => {
 
 export default MessageManger;
 export { TemplateList, RecordList, MessageMenu };
+export { default as enums } from './enums';
+export { getTemplateColumns, getRecordColumns, TemplateColumnsLoader, RecordColumnsLoader } from './getColumns';
+export { default as DetailContent } from './DetailContent';
+export { default as Actions, Detail, SendMessage } from './Actions';
diff --git a/src/components/MessageManger/locale/en-US.js b/src/components/MessageManger/locale/en-US.js
index ac49c53..f45d39e 100644
--- a/src/components/MessageManger/locale/en-US.js
+++ b/src/components/MessageManger/locale/en-US.js
@@ -14,6 +14,14 @@ const messages = {
   Level: 'Level',
   Status: 'Status',
   Content: 'Content',
+  Subject: 'Subject',
+  From: 'From',
+  To: 'To',
+  HtmlPreview: 'HTML Preview',
+  PlainText: 'Plain Text',
+  Signature: 'Signature',
+  Result: 'Result',
+  Attachments: 'Attachments',
   Props: 'Template Props',
   TemplateId: 'Template ID',
   CreatedAt: 'Created At',
@@ -22,7 +30,15 @@ const messages = {
   System: 'System',
   Business: 'Business',
   Enabled: 'Enabled',
-  Disabled: 'Disabled'
+  Disabled: 'Disabled',
+  SendMessage: 'Send Message',
+  SendMessageSuccess: 'Message sent successfully',
+  Resend: 'Resend',
+  PropsPlaceholder: 'Enter template variables in JSON format',
+  EmailAddress: 'Email Address',
+  PhoneNumber: 'Phone Number',
+  TemplateContent: 'Template Content',
+  PropsTip: 'Props example: {example}'
 };
 
 export default messages;
diff --git a/src/components/MessageManger/locale/zh-CN.js b/src/components/MessageManger/locale/zh-CN.js
index 4d23268..f2eaad8 100644
--- a/src/components/MessageManger/locale/zh-CN.js
+++ b/src/components/MessageManger/locale/zh-CN.js
@@ -14,6 +14,14 @@ const messages = {
   Level: '级别',
   Status: '状态',
   Content: '内容',
+  Subject: '主题',
+  From: '发件人',
+  To: '收件人',
+  HtmlPreview: 'HTML预览',
+  PlainText: '纯文本',
+  Signature: '签名',
+  Result: '发送结果',
+  Attachments: '附件',
   Props: '模板变量',
   TemplateId: '模板ID',
   CreatedAt: '创建时间',
@@ -22,7 +30,15 @@ const messages = {
   System: '系统',
   Business: '业务',
   Enabled: '启用',
-  Disabled: '禁用'
+  Disabled: '禁用',
+  SendMessage: '发送消息',
+  SendMessageSuccess: '发送成功',
+  Resend: '重新发送',
+  PropsPlaceholder: '请输入模板变量，JSON格式',
+  EmailAddress: '邮箱地址',
+  PhoneNumber: '手机号',
+  TemplateContent: '模板内容',
+  PropsTip: '模板变量示例：{example}'
 };
 
 export default messages;
diff --git a/src/mockPreset/index.js b/src/mockPreset/index.js
index c791d50..aa5dea8 100644
--- a/src/mockPreset/index.js
+++ b/src/mockPreset/index.js
@@ -480,6 +480,9 @@ const apis = merge({}, getApis(), {
         loader: ({ params }) => {
           return messageMangerData.templates.pageData.find(item => String(item.id) === String(params?.id));
         }
+      },
+      send: {
+        loader: () => ({ code: 0, data: { id: `record_${Date.now()}` } })
       }
     }
   },