@kne/react-modal 0.1.11 → 0.1.12

package/README.md

@@ -22,7 +22,7 @@ npm i --save @kne/react-modal
 
 #### 主要特性
 
-- 声明式 / 命令式同一套 props 与 UI（Modal `useModal`；Drawer `useDrawer` + `DrawerContextHolder`；确认框 `useConfirmModal`）
+- 声明式 / 命令式同一套 props 与 UI（Modal `useModal` + `ModalContextHolder`，多层就近 LayerHolder；Drawer `useDrawer` + `DrawerContextHolder`；确认框 `useConfirmModal`）
 - `footer` + `footerButtons`（`ButtonComponent` / `display` / `autoClose`）
 - title / footer 固定在滚动外，body 默认 SimpleBar
 - `--kne-modal-*` / `--kne-drawer-*` CSS 变量管理高度链
@@ -254,7 +254,7 @@ npm i --save @kne/react-modal
 - _ReactModal(@kne/current-lib_react-modal)[import * as _ReactModal from "@kne/react-modal"],(@kne/current-lib_react-modal/dist/index.css),antd(antd)
 
 ```jsx
-const { default: Modal, Drawer, DrawerContextHolder } = _ReactModal;
+const { default: Modal, Drawer, DrawerContextHolder, ModalContextHolder } = _ReactModal;
 const { Button, Space, message, Typography, Radio, App } = antd;
 const { useState, useEffect } = React;
 
@@ -311,9 +311,7 @@ const BasicExample = () => {
       <Button type="primary" onClick={() => setOpen(true)}>
         保存评估备注
       </Button>
-      <Text type="secondary">
-        最简受控弹层：切换 Modal / Drawer 对比同一套 props；异步 onConfirm 带 loading。
-      </Text>
+      <Text type="secondary">最简受控弹层：切换 Modal / Drawer 对比同一套 props；异步 onConfirm 带 loading。</Text>
       {isDrawer ? (
         <Drawer {...overlayProps} size="default">
           {content}
@@ -327,6 +325,7 @@ const BasicExample = () => {
 
 render(
   <App>
+    <ModalContextHolder />
     <DrawerContextHolder />
     <BasicExample />
   </App>
@@ -339,7 +338,7 @@ render(
 - _ReactModal(@kne/current-lib_react-modal)[import * as _ReactModal from "@kne/react-modal"],(@kne/current-lib_react-modal/dist/index.css),antd(antd)
 
 ```jsx
-const { default: Modal, Drawer, DrawerContextHolder } = _ReactModal;
+const { default: Modal, Drawer, DrawerContextHolder, ModalContextHolder } = _ReactModal;
 const { Button, Space, Radio, Tag, message, Typography, App } = antd;
 const { useState, useEffect } = React;
 
@@ -399,14 +398,8 @@ const FooterButtonsExample = () => {
         </Space>
       </div>
       <div className="demo-job-preview-body">
-        <Paragraph style={{ marginTop: 0 }}>
-          负责招聘中台、候选人评估等 B 端产品的前端交付；要求熟悉 React、工程化与组件库协作。
-        </Paragraph>
-        <Paragraph style={{ marginBottom: 0 }}>
-          {noPadding
-            ? 'noPadding=true：预览卡片应贴齐内容区边缘。'
-            : 'noPadding=false：预览卡片四周保留默认内边距。'}
-        </Paragraph>
+        <Paragraph style={{ marginTop: 0 }}>负责招聘中台、候选人评估等 B 端产品的前端交付；要求熟悉 React、工程化与组件库协作。</Paragraph>
+        <Paragraph style={{ marginBottom: 0 }}>{noPadding ? 'noPadding=true：预览卡片应贴齐内容区边缘。' : 'noPadding=false：预览卡片四周保留默认内边距。'}</Paragraph>
       </div>
     </div>
   );
@@ -447,17 +440,14 @@ const FooterButtonsExample = () => {
           noPadding={String(noPadding)}
         </Button>
       </Space>
-      {isDrawer ? (
-        <Drawer {...overlayProps}>{content}</Drawer>
-      ) : (
-        <Modal {...overlayProps}>{content}</Modal>
-      )}
+      {isDrawer ? <Drawer {...overlayProps}>{content}</Drawer> : <Modal {...overlayProps}>{content}</Modal>}
     </Space>
   );
 };
 
 render(
   <App>
+    <ModalContextHolder />
     <DrawerContextHolder />
     <FooterButtonsExample />
   </App>
@@ -470,7 +460,7 @@ render(
 - _ReactModal(@kne/current-lib_react-modal)[import * as _ReactModal from "@kne/react-modal"],(@kne/current-lib_react-modal/dist/index.css),antd(antd)
 
 ```jsx
-const { useModal, useDrawer, DrawerContextHolder } = _ReactModal;
+const { useModal, useDrawer, DrawerContextHolder, ModalContextHolder } = _ReactModal;
 const { Button, Space, message, Descriptions, Tag, Typography, Radio, App } = antd;
 const { useState } = React;
 
@@ -499,8 +489,7 @@ const CommandExample = () => {
             </Descriptions.Item>
           </Descriptions>
           <Paragraph type="secondary" style={{ marginBottom: 12 }}>
-            命令式 {isDrawer ? 'Drawer' : 'Modal'} 适用于列表页「快速查看」；children 为函数时可调用{' '}
-            <Text code>close()</Text> 主动关闭。
+            命令式 {isDrawer ? 'Drawer' : 'Modal'} 适用于列表页「快速查看」；children 为函数时可调用 <Text code>close()</Text> 主动关闭。
           </Paragraph>
           <Button size="small" onClick={() => close()}>
             关闭
@@ -531,15 +520,14 @@ const CommandExample = () => {
       <Button type="primary" onClick={openDetail}>
         从列表打开候选人快览
       </Button>
-      <Text type="secondary">
-        Drawer 模式需挂载 DrawerContextHolder；Modal 使用 antd App 内置 useModal。
-      </Text>
+      <Text type="secondary">须挂载 ModalContextHolder（内容弹窗 useModal）与 DrawerContextHolder（useDrawer）；确认框仍用 useConfirmModal。</Text>
     </Space>
   );
 };
 
 render(
   <App>
+    <ModalContextHolder />
     <DrawerContextHolder />
     <CommandExample />
   </App>
@@ -657,7 +645,7 @@ render(<BaseExample />);
 - _ReactModal(@kne/current-lib_react-modal)[import * as _ReactModal from "@kne/react-modal"],(@kne/current-lib_react-modal/dist/index.css),antd(antd)
 
 ```jsx
-const { default: Modal, Drawer, DrawerContextHolder } = _ReactModal;
+const { default: Modal, Drawer, DrawerContextHolder, ModalContextHolder } = _ReactModal;
 const { Button, Space, Typography, Divider, Radio, App } = antd;
 const { useState, useEffect } = React;
 
@@ -666,24 +654,15 @@ const { Title, Paragraph, Text } = Typography;
 const EVAL_SECTIONS = [
   {
     title: '沟通表达',
-    items: [
-      '表达结构清晰，能准确复述业务目标与技术约束。',
-      '对追问能够给出有层次的回答，而非堆砌名词。'
-    ]
+    items: ['表达结构清晰，能准确复述业务目标与技术约束。', '对追问能够给出有层次的回答，而非堆砌名词。']
   },
   {
     title: '专业深度',
-    items: [
-      '熟悉 React 渲染机制，能说明列表虚拟化方案选型理由。',
-      '了解前端监控与错误边界在生产环境的实践。'
-    ]
+    items: ['熟悉 React 渲染机制，能说明列表虚拟化方案选型理由。', '了解前端监控与错误边界在生产环境的实践。']
   },
   {
     title: '项目复杂度',
-    items: [
-      '参与过多团队协同的中台项目，承担核心模块 Owner。',
-      '能描述需求变更下的架构演进与风险控制。'
-    ]
+    items: ['参与过多团队协同的中台项目，承担核心模块 Owner。', '能描述需求变更下的架构演进与风险控制。']
   },
   {
     title: '协作推进',
@@ -757,24 +736,10 @@ const LongContentExample = () => {
         </Button>
         <Button onClick={() => setOpenSelfScroll(true)}>自管滚动（bodyScroll=false）</Button>
       </Space>
-      <Overlay
-        title="陈思远 · 面试评估纪要"
-        open={open}
-        onClose={() => setOpen(false)}
-        onConfirm={() => {}}
-        confirmText="保存纪要"
-        size={isDrawer ? 'default' : undefined}
-      >
+      <Overlay title="陈思远 · 面试评估纪要" open={open} onClose={() => setOpen(false)} onConfirm={() => {}} confirmText="保存纪要" size={isDrawer ? 'default' : undefined}>
         <EvaluationContent />
       </Overlay>
-      <Overlay
-        title="自管滚动示例"
-        open={openSelfScroll}
-        onClose={() => setOpenSelfScroll(false)}
-        bodyScroll={false}
-        footer={null}
-        size={isDrawer ? 'large' : undefined}
-      >
+      <Overlay title="自管滚动示例" open={openSelfScroll} onClose={() => setOpenSelfScroll(false)} bodyScroll={false} footer={null} size={isDrawer ? 'large' : undefined}>
         <div
           style={{
             height: &#96;var(${contentHeightVar})&#96;,
@@ -798,6 +763,7 @@ const LongContentExample = () => {
 
 render(
   <App>
+    <ModalContextHolder />
     <DrawerContextHolder />
     <LongContentExample />
   </App>
@@ -810,7 +776,7 @@ render(
 - _ReactModal(@kne/current-lib_react-modal)[import * as _ReactModal from "@kne/react-modal"],(@kne/current-lib_react-modal/dist/index.css),antd(antd)
 
 ```jsx
-const { default: Modal, Drawer, DrawerContextHolder } = _ReactModal;
+const { default: Modal, Drawer, DrawerContextHolder, ModalContextHolder } = _ReactModal;
 const { Button, Space, Switch, Tag, Descriptions, Radio, Typography, App } = antd;
 const { useState, useEffect } = React;
 
@@ -927,20 +893,14 @@ const HeightVarsExample = () => {
         />
       </Space>
       <Space wrap align="center">
-        <Switch
-          checked={customVars}
-          onChange={setCustomVars}
-          checkedChildren="自定义变量"
-          unCheckedChildren="默认变量"
-        />
+        <Switch checked={customVars} onChange={setCustomVars} checkedChildren="自定义变量" unCheckedChildren="默认变量" />
         <Button type="primary" onClick={() => setOpen(true)}>
           打开弹层对比高度
         </Button>
         <Tag color={customVars ? 'blue' : 'default'}>{customVars ? '已覆盖 CSS 变量' : '库内默认值'}</Tag>
       </Space>
       <div style={{ color: 'rgba(0,0,0,0.45)', maxWidth: 640 }}>
-        通过 <code>style</code> 覆盖 {chrome.varPrefix}-* 变量。Drawer 无 viewport-gutter；Modal 可加大 gutter
-        使 body 明显变矮。色块绑定 <code>{chrome.contentHeightVar}</code>。
+        通过 <code>style</code> 覆盖 {chrome.varPrefix}-* 变量。Drawer 无 viewport-gutter；Modal 可加大 gutter 使 body 明显变矮。色块绑定 <code>{chrome.contentHeightVar}</code>。
       </div>
       <HeightProbe open={open} revision={revision} mode={mode} />
       <Overlay
@@ -965,9 +925,7 @@ const HeightVarsExample = () => {
           }}
         >
           <div style={{ padding: 12 }}>
-            <p style={{ marginTop: 0, fontWeight: 600 }}>
-              色块 height = var({chrome.contentHeightVar})。切换「自定义/默认」与 Modal/Drawer 后重新打开对比。
-            </p>
+            <p style={{ marginTop: 0, fontWeight: 600 }}>色块 height = var({chrome.contentHeightVar})。切换「自定义/默认」与 Modal/Drawer 后重新打开对比。</p>
             {fillLines.map(text => (
               <p key={text} style={{ margin: '4px 0' }}>
                 {text}
@@ -982,6 +940,7 @@ const HeightVarsExample = () => {
 
 render(
   <App>
+    <ModalContextHolder />
     <DrawerContextHolder />
     <HeightVarsExample />
   </App>
@@ -994,7 +953,7 @@ render(
 - _ReactModal(@kne/current-lib_react-modal)[import * as _ReactModal from "@kne/react-modal"],(@kne/current-lib_react-modal/dist/index.css),antd(antd)
 
 ```jsx
-const { default: Modal, Drawer, DrawerContextHolder } = _ReactModal;
+const { default: Modal, Drawer, DrawerContextHolder, ModalContextHolder } = _ReactModal;
 const { Button, Space, Switch, Radio, Tag, Descriptions, Typography, App } = antd;
 const { useState, useEffect } = React;
 
@@ -1130,12 +1089,7 @@ const ChromeHeightExample = () => {
         <span>title</span>
         <Switch checked={hasTitle} onChange={setHasTitle} checkedChildren="有" unCheckedChildren="空" />
         <span>bodyScroll</span>
-        <Switch
-          checked={bodyScroll}
-          onChange={setBodyScroll}
-          checkedChildren="true"
-          unCheckedChildren="false"
-        />
+        <Switch checked={bodyScroll} onChange={setBodyScroll} checkedChildren="true" unCheckedChildren="false" />
       </Space>
       <div>
         <div style={{ marginBottom: 8 }}>footer</div>
@@ -1185,9 +1139,7 @@ const ChromeHeightExample = () => {
             }}
           >
             <div style={{ padding: 12 }}>
-              <p style={{ marginTop: 0, fontWeight: 600 }}>
-                滚动宿主 height: var({chrome.contentHeightVar})。footer=null 时 footer 变量应为 0。
-              </p>
+              <p style={{ marginTop: 0, fontWeight: 600 }}>滚动宿主 height: var({chrome.contentHeightVar})。footer=null 时 footer 变量应为 0。</p>
               {lines.map(text => (
                 <p key={text}>{text}</p>
               ))}
@@ -1217,6 +1169,7 @@ const ChromeHeightExample = () => {
 
 render(
   <App>
+    <ModalContextHolder />
     <DrawerContextHolder />
     <ChromeHeightExample />
   </App>
@@ -1229,7 +1182,7 @@ render(
 - _ReactModal(@kne/current-lib_react-modal)[import * as _ReactModal from "@kne/react-modal"],(@kne/current-lib_react-modal/dist/index.css),antd(antd)
 
 ```jsx
-const { default: Modal, useModal, DrawerContextHolder } = _ReactModal;
+const { default: Modal, useModal, DrawerContextHolder, ModalContextHolder } = _ReactModal;
 const { Button, Space, Radio, Typography, App } = antd;
 const { useState } = React;
 
@@ -1274,7 +1227,7 @@ const LimitedHeightExample = () => {
           size="small"
           options={[
             { label: '声明式 Modal', value: 'declarative' },
-            { label: 'useModal（info）', value: 'imperative' }
+            { label: 'useModal（命令式）', value: 'imperative' }
           ]}
           onChange={e => setMode(e.target.value)}
         />
@@ -1294,9 +1247,7 @@ const LimitedHeightExample = () => {
       >
         打开高度受限弹窗
       </Button>
-      <Text type="secondary">
-        useModal 走 antd modal.info，已覆盖 <code>.ant-modal-confirm-paragraph</code> 的 12px 宽度扣减。
-      </Text>
+      <Text type="secondary">useModal 走声明式 Modal（经 ModalContextHolder 就近 patch），与声明式同一套 chrome。</Text>
       {mode === 'declarative' ? (
         <Modal {...overlayProps} open={open}>
           {content}
@@ -1308,6 +1259,7 @@ const LimitedHeightExample = () => {
 
 render(
   <App>
+    <ModalContextHolder />
     <DrawerContextHolder />
     <LimitedHeightExample />
   </App>
@@ -1320,30 +1272,8 @@ render(
 - _ReactModal(@kne/current-lib_react-modal)[import * as _ReactModal from "@kne/react-modal"],(@kne/current-lib_react-modal/dist/index.css),antd(antd)
 
 ```jsx
-const {
-  default: Modal,
-  Drawer,
-  DrawerContextHolder,
-  TabsLayout,
-  ColumnsLayout,
-  ScrollRegion,
-  modalClassNames
-} = _ReactModal;
-const {
-  Button,
-  Space,
-  Splitter,
-  Input,
-  Avatar,
-  Tag,
-  Descriptions,
-  Progress,
-  Typography,
-  Divider,
-  App,
-  message,
-  Radio
-} = antd;
+const { default: Modal, Drawer, DrawerContextHolder, ModalContextHolder, TabsLayout, ColumnsLayout, ScrollRegion, modalClassNames } = _ReactModal;
+const { Button, Space, Splitter, Input, Avatar, Tag, Descriptions, Progress, Typography, Divider, App, message, Radio } = antd;
 const { useState, useMemo, useEffect } = React;
 
 const { Text, Title, Paragraph } = Typography;
@@ -1500,26 +1430,15 @@ const SCORE_LABELS = {
 const CandidateList = ({ items, activeKey, onSelect, search, onSearchChange }) => (
   <>
     <div className="modal-scroll-region-sticky candidate-list-toolbar">
-      <Input
-        allowClear
-        placeholder="搜索姓名、岗位、城市…"
-        value={search}
-        onChange={e => onSearchChange(e.target.value)}
-      />
+      <Input allowClear placeholder="搜索姓名、岗位、城市…" value={search} onChange={e => onSearchChange(e.target.value)} />
       <Text type="secondary">本批 {items.length} 人 · 点击切换右侧详情</Text>
     </div>
     {items.map(item => {
       const status = STATUS_MAP[item.status] || STATUS_MAP.pending;
       return (
-        <div
-          key={item.key}
-          className={&#96;candidate-list-item${item.key === activeKey ? ' is-active' : ''}&#96;}
-          onClick={() => onSelect(item.key)}
-        >
+        <div key={item.key} className={&#96;candidate-list-item${item.key === activeKey ? ' is-active' : ''}&#96;} onClick={() => onSelect(item.key)}>
           <div className="candidate-list-item-main">
-            <Avatar style={{ backgroundColor: item.key === activeKey ? '#1677ff' : '#87d068' }}>
-              {item.name.slice(-2)}
-            </Avatar>
+            <Avatar style={{ backgroundColor: item.key === activeKey ? '#1677ff' : '#87d068' }}>{item.name.slice(-2)}</Avatar>
             <div className="candidate-list-item-body">
               <div className="candidate-list-item-title">{item.name}</div>
               <div className="candidate-list-item-meta">
@@ -1541,8 +1460,7 @@ const CandidateDetail = ({ candidate }) => {
     return null;
   }
   const status = STATUS_MAP[candidate.status] || STATUS_MAP.pending;
-  const avgScore =
-    Object.values(candidate.scores).reduce((a, b) => a + b, 0) / Object.values(candidate.scores).length;
+  const avgScore = Object.values(candidate.scores).reduce((a, b) => a + b, 0) / Object.values(candidate.scores).length;
 
   return (
     <div className="candidate-detail">
@@ -1560,9 +1478,7 @@ const CandidateDetail = ({ candidate }) => {
         </div>
         <div style={{ textAlign: 'right' }}>
           <Text type="secondary">综合</Text>
-          <div style={{ fontSize: 28, fontWeight: 600, color: '#1677ff', lineHeight: 1.2 }}>
-            {avgScore.toFixed(1)}
-          </div>
+          <div style={{ fontSize: 28, fontWeight: 600, color: '#1677ff', lineHeight: 1.2 }}>{avgScore.toFixed(1)}</div>
         </div>
       </div>
 
@@ -1611,12 +1527,7 @@ const useCandidatePanel = () => {
     if (!q) {
       return ALL_CANDIDATES;
     }
-    return ALL_CANDIDATES.filter(
-      c =>
-        c.name.toLowerCase().includes(q) ||
-        c.role.toLowerCase().includes(q) ||
-        c.city.toLowerCase().includes(q)
-    );
+    return ALL_CANDIDATES.filter(c => c.name.toLowerCase().includes(q) || c.role.toLowerCase().includes(q) || c.city.toLowerCase().includes(q));
   }, [search]);
 
   const current = filtered.find(item => item.key === active) || filtered[0];
@@ -1630,13 +1541,7 @@ const ColumnsPane = () => {
   return (
     <ColumnsLayout widths={['34%', '1fr']}>
       <ScrollRegion>
-        <CandidateList
-          items={filtered}
-          activeKey={current?.key}
-          onSelect={setActive}
-          search={search}
-          onSearchChange={setSearch}
-        />
+        <CandidateList items={filtered} activeKey={current?.key} onSelect={setActive} search={search} onSearchChange={setSearch} />
       </ScrollRegion>
       <ScrollRegion inset>
         <CandidateDetail candidate={current} />
@@ -1651,22 +1556,10 @@ const SplitterPane = () => {
   return (
     <div style={{ height: '100%', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
       <p className="demo-panel-hint">可拖拽中间分隔条调整列表宽度，左右列仍各自 SimpleBar 滚动。</p>
-      <Splitter
-        className={modalClassNames.splitter}
-        style={{ flex: 1, minHeight: 0 }}
-        defaultSize="34%"
-        min="240"
-        max="52%"
-      >
+      <Splitter className={modalClassNames.splitter} style={{ flex: 1, minHeight: 0 }} defaultSize="34%" min="240" max="52%">
         <Splitter.Panel>
           <ScrollRegion>
-            <CandidateList
-              items={filtered}
-              activeKey={current?.key}
-              onSelect={setActive}
-              search={search}
-              onSearchChange={setSearch}
-            />
+            <CandidateList items={filtered} activeKey={current?.key} onSelect={setActive} search={search} onSearchChange={setSearch} />
           </ScrollRegion>
         </Splitter.Panel>
         <Splitter.Panel>
@@ -1819,6 +1712,7 @@ const ExtendLayoutExample = () => {
 
 render(
   <App>
+    <ModalContextHolder />
     <DrawerContextHolder />
     <ExtendLayoutExample />
   </App>
@@ -1831,7 +1725,7 @@ render(
 - _ReactModal(@kne/current-lib_react-modal)[import * as _ReactModal from "@kne/react-modal"],(@kne/current-lib_react-modal/dist/index.css),antd(antd)
 
 ```jsx
-const { default: Modal, useModal, useDrawer, DrawerContextHolder } = _ReactModal;
+const { default: Modal, useModal, useDrawer, DrawerContextHolder, ModalContextHolder } = _ReactModal;
 const { Button, Space, Typography, Tag, message, Checkbox, Radio, App } = antd;
 const { useState, useEffect } = React;
 const { Text, Paragraph } = Typography;
@@ -1870,11 +1764,7 @@ const NestProbe = ({ open, isDrawer }) => {
     return <Text type="secondary">打开内层后显示挂载探针</Text>;
   }
 
-  return (
-    <Tag color={info.hoisted ? 'success' : 'error'}>
-      内层 Modal {info.hoisted ? '已 hoist 到外层外侧' : '挂载异常'}
-    </Tag>
-  );
+  return <Tag color={info.hoisted ? 'success' : 'error'}>内层 Modal {info.hoisted ? '已 hoist 到外层外侧' : '挂载异常'}</Tag>;
 };
 
 const ExportFieldPicker = ({ isDrawer }) => {
@@ -1884,8 +1774,7 @@ const ExportFieldPicker = ({ isDrawer }) => {
   return (
     <div>
       <Paragraph>
-        已选择本批 <Text strong>8</Text> 位候选人。内层始终为声明式 Modal；外层当前为{' '}
-        <Text code>{isDrawer ? 'Drawer' : 'Modal'}</Text>。
+        已选择本批 <Text strong>8</Text> 位候选人。内层始终为声明式 Modal；外层当前为 <Text code>{isDrawer ? 'Drawer' : 'Modal'}</Text>。
       </Paragraph>
       <Space>
         <Button type="primary" onClick={() => setInnerOpen(true)}>
@@ -1907,12 +1796,7 @@ const ExportFieldPicker = ({ isDrawer }) => {
         }}
         confirmText="确认字段"
       >
-        <Checkbox.Group
-          style={{ display: 'flex', flexDirection: 'column', gap: 10 }}
-          options={EXPORT_FIELDS}
-          value={checked}
-          onChange={setChecked}
-        />
+        <Checkbox.Group style={{ display: 'flex', flexDirection: 'column', gap: 10 }} options={EXPORT_FIELDS} value={checked} onChange={setChecked} />
       </Modal>
     </div>
   );
@@ -1961,6 +1845,7 @@ const NestedModalExample = () => {
 
 render(
   <App>
+    <ModalContextHolder />
     <DrawerContextHolder />
     <NestedModalExample />
   </App>
@@ -1973,7 +1858,7 @@ render(
 - _ReactModal(@kne/current-lib_react-modal)[import * as _ReactModal from "@kne/react-modal"],(@kne/current-lib_react-modal/dist/index.css),_FormInfo(@kne/form-info)[import * as _FormInfo from "@kne/form-info"],(@kne/form-info/dist/index.css),antd(antd)
 
 ```jsx
-const { createModalRender, createDrawerRender, DrawerContextHolder } = _ReactModal;
+const { createModalRender, createDrawerRender, DrawerContextHolder, ModalContextHolder } = _ReactModal;
 const { default: FormInfo, FormModal, Input, TextArea } = _FormInfo;
 const { Button, Space, Typography, App, message, Switch, Flex, Radio } = antd;
 const { useState, useMemo, useEffect } = React;
@@ -2009,11 +1894,7 @@ const SECTION_DEFS = [
   {
     key: 'experience',
     title: '经历与补充',
-    fields: Array.from({ length: 16 }, (_, i) => [
-      &#96;expField${i + 1}&#96;,
-      &#96;经历补充项 ${i + 1}&#96;,
-      i % 4 === 0 ? 'REQ' : ''
-    ])
+    fields: Array.from({ length: 16 }, (_, i) => [&#96;expField${i + 1}&#96;, &#96;经历补充项 ${i + 1}&#96;, i % 4 === 0 ? 'REQ' : ''])
   }
 ];
 
@@ -2033,8 +1914,7 @@ const buildInitialData = () => {
     collabScore: '4',
     cultureScore: '5',
     overallScore: '4.5',
-    summary:
-      '沟通清晰，项目推进稳定。以下为加长评估说明，用于验证弹窗 body 在超长表单下的 SimpleBar 滚动：标题与底部按钮应固定，仅中间表单区域滚动。'.repeat(3)
+    summary: '沟通清晰，项目推进稳定。以下为加长评估说明，用于验证弹窗 body 在超长表单下的 SimpleBar 滚动：标题与底部按钮应固定，仅中间表单区域滚动。'.repeat(3)
   };
   SECTION_DEFS[2].fields.forEach(([name], i) => {
     data[name] = &#96;补充说明内容 ${i + 1}：用于拉长表单高度。&#96;;
@@ -2063,20 +1943,8 @@ const LongFormFields = () => (
       gap={20}
       list={[
         <TextArea key="summary" name="summary" label="综合评语" rule="REQ" block />,
-        <TextArea
-          key="risk"
-          name="risk"
-          label="风险与待跟进"
-          block
-          placeholder="列出风险点、待确认事项等"
-        />,
-        <TextArea
-          key="plan"
-          name="plan"
-          label="入职 / 下轮计划"
-          block
-          placeholder="试用期目标、面试官建议等"
-        />
+        <TextArea key="risk" name="risk" label="风险与待跟进" block placeholder="列出风险点、待确认事项等" />,
+        <TextArea key="plan" name="plan" label="入职 / 下轮计划" block placeholder="试用期目标、面试官建议等" />
       ]}
     />
     {Array.from({ length: 8 }, (_, block) => (
@@ -2108,20 +1976,9 @@ const FormInfoModalExample = () => {
     }
   }, [mode]);
 
-  const renderModalBase = isDrawer
-    ? createDrawerRender({ placement: 'right', footerButtons: [], bodyScroll: true, size: 'large' })
-    : createModalRender({ footerButtons: [], bodyScroll: true, size: 'large' });
-
-  const renderModal = ({
-    formProps,
-    saveText,
-    autoClose,
-    onCancel,
-    footer,
-    modalRender,
-    children,
-    ...props
-  }) =>
+  const renderModalBase = isDrawer ? createDrawerRender({ placement: 'right', footerButtons: [], bodyScroll: true, size: 'large' }) : createModalRender({ footerButtons: [], bodyScroll: true, size: 'large' });
+
+  const renderModal = ({ formProps, saveText, autoClose, onCancel, footer, modalRender, children, ...props }) =>
     renderModalBase({
       ...props,
       bodyScroll,
@@ -2155,9 +2012,7 @@ const FormInfoModalExample = () => {
           <Switch checked={bodyScroll} onChange={setBodyScroll} checkedChildren="开" unCheckedChildren="关" />
         </Space>
       </Space>
-      <Text type="secondary">
-        createModalRender / createDrawerRender 注入默认 props；切换 Modal / Drawer 对比 form-info 宿主集成。
-      </Text>
+      <Text type="secondary">createModalRender / createDrawerRender 注入默认 props；切换 Modal / Drawer 对比 form-info 宿主集成。</Text>
 
       <FormModal
         title={isDrawer ? '候选人深度评估（侧滑）' : '候选人深度评估（超长表单）'}
@@ -2183,6 +2038,7 @@ const FormInfoModalExample = () => {
 
 render(
   <App>
+    <ModalContextHolder />
     <DrawerContextHolder />
     <FormInfoModalExample />
   </App>
@@ -2195,7 +2051,7 @@ render(
 - _ReactModal(@kne/current-lib_react-modal)[import * as _ReactModal from "@kne/react-modal"],(@kne/current-lib_react-modal/dist/index.css),_FormInfo(@kne/form-info)[import * as _FormInfo from "@kne/form-info"],(@kne/form-info/dist/index.css),antd(antd)
 
 ```jsx
-const { createModalRender, createDrawerRender, modalClassNames, DrawerContextHolder } = _ReactModal;
+const { createModalRender, createDrawerRender, modalClassNames, DrawerContextHolder, ModalContextHolder } = _ReactModal;
 const { default: FormInfo, FormStepsModal, List, Input, TextArea } = _FormInfo;
 const { Button, Space, Typography, App, message, Flex, Radio } = antd;
 const { useState, useEffect } = React;
@@ -2217,25 +2073,17 @@ const renderStepsModalBase = isDrawer =>
         className: modalClassNames.stepsForm
       });
 
-const renderStepsModal = isDrawer => ({
-  formProps,
-  saveText,
-  autoClose,
-  onCancel,
-  footer,
-  modalRender,
-  children,
-  className,
-  ...props
-}) =>
-  renderStepsModalBase(isDrawer)({
-    ...props,
-    className,
-    onClose: onCancel,
-    footer: typeof footer === 'function' ? footer() : footer,
-    modalRender,
-    children
-  });
+const renderStepsModal =
+  isDrawer =>
+  ({ formProps, saveText, autoClose, onCancel, footer, modalRender, children, className, ...props }) =>
+    renderStepsModalBase(isDrawer)({
+      ...props,
+      className,
+      onClose: onCancel,
+      footer: typeof footer === 'function' ? footer() : footer,
+      modalRender,
+      children
+    });
 
 const STEP_DATA = {
   name: '李四',
@@ -2340,21 +2188,9 @@ const FormInfoStepsModalExample = () => {
                   title="维度评分"
                   column={2}
                   gap={20}
-                  list={[
-                    <Input name="commScore" label="沟通表达" rule="REQ" />,
-                    <Input name="techScore" label="专业深度" rule="REQ" />,
-                    <Input name="projectScore" label="项目复杂度" rule="REQ" />
-                  ]}
-                />
-                <FormInfo
-                  bordered
-                  title="评语"
-                  column={1}
-                  gap={20}
-                  list={[
-                    <TextArea name="summary" label="综合评语" rule="REQ" block rows={4} />
-                  ]}
+                  list={[<Input name="commScore" label="沟通表达" rule="REQ" />, <Input name="techScore" label="专业深度" rule="REQ" />, <Input name="projectScore" label="项目复杂度" rule="REQ" />]}
                 />
+                <FormInfo bordered title="评语" column={1} gap={20} list={[<TextArea name="summary" label="综合评语" rule="REQ" block rows={4} />]} />
               </Flex>
             )
           },
@@ -2371,22 +2207,9 @@ const FormInfoStepsModalExample = () => {
                   maxLength={5}
                   addText="添加经历"
                   itemTitle={({ index, data }) => data?.companyName || &#96;经历 ${index + 1}&#96;}
-                  list={[
-                    <Input name="companyName" label="公司" rule="REQ" />,
-                    <Input name="role" label="职位" rule="REQ" />,
-                    <Input name="years" label="年限" placeholder="例如 2年" />
-                  ]}
-                />
-                <FormInfo
-                  bordered
-                  title="目标与风险"
-                  column={1}
-                  gap={20}
-                  list={[
-                    <TextArea name="objectives" label="培养目标" rule="REQ" block rows={4} />,
-                    <TextArea name="risks" label="风险与跟进" block rows={3} />
-                  ]}
+                  list={[<Input name="companyName" label="公司" rule="REQ" />, <Input name="role" label="职位" rule="REQ" />, <Input name="years" label="年限" placeholder="例如 2年" />]}
                 />
+                <FormInfo bordered title="目标与风险" column={1} gap={20} list={[<TextArea name="objectives" label="培养目标" rule="REQ" block rows={4} />, <TextArea name="risks" label="风险与跟进" block rows={3} />]} />
               </Flex>
             )
           }
@@ -2398,6 +2221,7 @@ const FormInfoStepsModalExample = () => {
 
 render(
   <App>
+    <ModalContextHolder />
     <DrawerContextHolder />
     <FormInfoStepsModalExample />
   </App>
@@ -2413,52 +2237,54 @@ render(
 
 ##### 属性
 
-| 属性 | 类型 | 默认值 | 描述 |
-|------|------|--------|------|
-| open | boolean | - | 是否显示 |
-| onClose | function | - | 关闭回调；受控时由此改 `open` |
-| title | ReactNode \| function | - | 标题；为 function 时入参含 `close` |
-| children | ReactNode \| function | - | 内容；为 function 时入参含 `close` |
-| onConfirm | function | - | 默认确认按钮；支持 Promise；返回 `false` 不关闭 |
-| onCancel | function | - | 默认取消按钮；语义同 `onConfirm` |
-| confirmText | ReactNode | - | 默认确认文案（默认 intl Confirm） |
-| cancelText | ReactNode | - | 默认取消文案（默认 intl Cancel） |
-| footer | ReactNode \| function \| null | - | 左侧 footer 插槽；与 `footerButtons` 均为「未设置」且 `footer === null` 时不渲染 footer |
-| footerButtons | array \| function | - | 右侧按钮区，见下表；未传时为取消+确认 |
-| size | `small` \| `default` \| `large` | `default` | 桌面宽度档位 |
-| noPadding | boolean | false | 去掉 body 内边距。未传且 `bodyScroll={false}` 时默认视为 true；显式 `noPadding={false}` 可保留内边距 |
-| maskClosable | boolean | false | 点击蒙层是否关闭 |
-| closable | boolean | true | 是否显示右上角关闭 |
-| bodyScroll | boolean | true | true 使用 SimpleBar；false 不挂 SimpleBar，内容自管滚动，且默认 noPadding（可用 `noPadding={false}` 覆盖） |
-| mobileFullscreen | boolean | true | 移动端是否全屏 |
-| getContainer | HTMLElement \| function | - | 挂载容器；嵌套时默认挂到外层 `.ant-modal-root` 外侧 |
-| width / zIndex / className / afterClose / style / styles | - | - | 透传或覆盖 antd Modal |
+| 属性                                                     | 类型                            | 默认值    | 描述                                                                                                       |
+| -------------------------------------------------------- | ------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------- |
+| open                                                     | boolean                         | -         | 是否显示                                                                                                   |
+| onClose                                                  | function                        | -         | 关闭回调；受控时由此改 `open`                                                                              |
+| title                                                    | ReactNode \| function           | -         | 标题；为 function 时入参含 `close`                                                                         |
+| children                                                 | ReactNode \| function           | -         | 内容；为 function 时入参含 `close`                                                                         |
+| onConfirm                                                | function                        | -         | 默认确认按钮；支持 Promise；返回 `false` 不关闭                                                            |
+| onCancel                                                 | function                        | -         | 默认取消按钮；语义同 `onConfirm`                                                                           |
+| confirmText                                              | ReactNode                       | -         | 默认确认文案（默认 intl Confirm）                                                                          |
+| cancelText                                               | ReactNode                       | -         | 默认取消文案（默认 intl Cancel）                                                                           |
+| footer                                                   | ReactNode \| function \| null   | -         | 左侧 footer 插槽；与 `footerButtons` 均为「未设置」且 `footer === null` 时不渲染 footer                    |
+| footerButtons                                            | array \| function               | -         | 右侧按钮区，见下表；未传时为取消+确认                                                                      |
+| size                                                     | `small` \| `default` \| `large` | `default` | 桌面宽度档位                                                                                               |
+| noPadding                                                | boolean                         | false     | 去掉 body 内边距。未传且 `bodyScroll={false}` 时默认视为 true；显式 `noPadding={false}` 可保留内边距       |
+| maskClosable                                             | boolean                         | false     | 点击蒙层是否关闭                                                                                           |
+| closable                                                 | boolean                         | true      | 是否显示右上角关闭                                                                                         |
+| bodyScroll                                               | boolean                         | true      | true 使用 SimpleBar；false 不挂 SimpleBar，内容自管滚动，且默认 noPadding（可用 `noPadding={false}` 覆盖） |
+| mobileFullscreen                                         | boolean                         | true      | 移动端是否全屏                                                                                             |
+| getContainer                                             | HTMLElement \| function         | -         | 挂载容器；嵌套时默认挂到外层 `.ant-modal-root` 外侧                                                        |
+| width / zIndex / className / afterClose / style / styles | -                               | -         | 透传或覆盖 antd Modal                                                                                      |
 
 其余未列出参数按 antd Modal 习惯透传。
 
 ##### footerButtons 项
 
-| 属性 | 类型 | 默认值 | 描述 |
-|------|------|--------|------|
-| children | ReactNode | - | 按钮文案 |
-| type | string | - | antd Button type |
-| onClick | function | - | 可返回 Promise；末参为 `targetProps`（含 `close`）；`autoClose` 且结果 `!== false` 时关闭 |
-| autoClose | boolean | true | 点击后是否自动关闭 |
-| display | boolean \| function | - | `false` 隐藏；function 返回值决定是否展示 |
-| ButtonComponent | component | - | 自定义按钮；默认走 ButtonGroup 内 LoadingButton |
-| ... | - | - | 其余透传 Button |
+| 属性            | 类型                | 默认值 | 描述                                                                                      |
+| --------------- | ------------------- | ------ | ----------------------------------------------------------------------------------------- |
+| children        | ReactNode           | -      | 按钮文案                                                                                  |
+| type            | string              | -      | antd Button type                                                                          |
+| onClick         | function            | -      | 可返回 Promise；末参为 `targetProps`（含 `close`）；`autoClose` 且结果 `!== false` 时关闭 |
+| autoClose       | boolean             | true   | 点击后是否自动关闭                                                                        |
+| display         | boolean \| function | -      | `false` 隐藏；function 返回值决定是否展示                                                 |
+| ButtonComponent | component           | -      | 自定义按钮；默认走 ButtonGroup 内 LoadingButton                                           |
+| ...             | -                   | -      | 其余透传 Button                                                                           |
 
 - `footerButtons={[]}`：不渲染按钮列（可与左侧 `footer` 并存）。**移动端**此模式且 `footer` 有内容时（如 FormModal 自带 Submit/Cancel），按钮区会自动居中，与默认 `footerButtons` 行为一致。
 - `footer === null` 且未传 `footerButtons`：不渲染整个 footer 区
 
 #### useModal
 
+命令式内容弹窗。须在 antd `App` 内挂载 **`<ModalContextHolder />`**（页面根层）；弹窗内容树内另有 `ModalLayerProvider`，嵌套 `useModal` 会就近 patch，叠层交给 antd `ZIndexContext`。**不**再走 `App.modal.info` / ConfirmDialog。
+
 命令式打开弹窗，参数同 Modal。需在 antd `App`（或 `App.useApp` 可用）上下文中使用。
 
 ##### 返回值
 
-| 属性 | 类型 | 描述 |
-|------|------|------|
+| 属性  | 类型     | 描述                                                      |
+| ----- | -------- | --------------------------------------------------------- |
 | modal | function | 调用后弹出 Modal；返回 `{ close }`；默认 `zIndex` 为 1100 |
 
 #### useConfirmModal
@@ -2467,29 +2293,29 @@ render(
 
 ##### 参数
 
-| 属性 | 类型 | 默认值 | 描述 |
-|------|------|--------|------|
-| type | `confirm` \| `info` \| `success` \| `warning` \| `error` | `confirm` | 调用 `modal[type]` |
-| title | ReactNode | - | 标题 |
-| message | ReactNode | - | 正文 |
-| danger | boolean | false | 为 true 时展示语义图标，确认钮危险色 |
-| confirmType | `info` \| `warning` \| `error` \| `success` | `info` | `type=confirm` 时图标语义 |
-| icon | ReactNode | - | 自定义图标，覆盖默认 |
-| onConfirm | function | - | 映射 antd `onOk` |
-| onCancel | function | - | 映射 antd `onCancel` |
-| confirmText | ReactNode | - | 映射 `okText` |
-| cancelText | ReactNode | - | 映射 `cancelText` |
-| onClose | function | - | 调用 `close()` 时触发 |
-| maskClosable | boolean | false | 默认不可点蒙层关闭 |
-| getContainer | HTMLElement \| function | - | 嵌套时挂到外层 modal 外侧 |
-| afterClose / zIndex / wrapClassName | - | - | 透传；默认 `zIndex` 1100 |
+| 属性                                | 类型                                                     | 默认值    | 描述                                 |
+| ----------------------------------- | -------------------------------------------------------- | --------- | ------------------------------------ |
+| type                                | `confirm` \| `info` \| `success` \| `warning` \| `error` | `confirm` | 调用 `modal[type]`                   |
+| title                               | ReactNode                                                | -         | 标题                                 |
+| message                             | ReactNode                                                | -         | 正文                                 |
+| danger                              | boolean                                                  | false     | 为 true 时展示语义图标，确认钮危险色 |
+| confirmType                         | `info` \| `warning` \| `error` \| `success`              | `info`    | `type=confirm` 时图标语义            |
+| icon                                | ReactNode                                                | -         | 自定义图标，覆盖默认                 |
+| onConfirm                           | function                                                 | -         | 映射 antd `onOk`                     |
+| onCancel                            | function                                                 | -         | 映射 antd `onCancel`                 |
+| confirmText                         | ReactNode                                                | -         | 映射 `okText`                        |
+| cancelText                          | ReactNode                                                | -         | 映射 `cancelText`                    |
+| onClose                             | function                                                 | -         | 调用 `close()` 时触发                |
+| maskClosable                        | boolean                                                  | false     | 默认不可点蒙层关闭                   |
+| getContainer                        | HTMLElement \| function                                  | -         | 嵌套时挂到外层 modal 外侧            |
+| afterClose / zIndex / wrapClassName | -                                                        | -         | 透传；默认 `zIndex` 1100             |
 
 其余未列出参数按 antd Modal.confirm 习惯透传。
 
 ##### 返回值
 
-| 属性 | 类型 | 描述 |
-|------|------|------|
+| 属性         | 类型     | 描述                               |
+| ------------ | -------- | ---------------------------------- |
 | confirmModal | function | 调用后弹出确认框；返回 `{ close }` |
 
 与 `useModal` 对比：专用于短文案确认 / 提示，桌面居中窄宽（约 400px），无 SimpleBar body。
@@ -2498,20 +2324,20 @@ render(
 
 挂在 `.modal` / `.modal-outer` 上，可业务覆盖。
 
-| 变量 | 说明 |
-|------|------|
-| `--kne-modal-viewport-height` | 默认 `var(--kne-viewport-height, 100vh)` |
-| `--kne-modal-viewport-width` | 默认 `var(--kne-viewport-width, 100vw)` |
-| `--kne-modal-title-height` | 标题区高度贡献，默认 `48px`；无 title 为 `0` |
-| `--kne-modal-footer-height` | footer 高度贡献，默认 `58px`；无 footer 为 `0` |
-| `--kne-modal-viewport-gutter` | 桌面相对视口留白合计，默认 `120px`；移动全屏 `0` |
-| `--kne-modal-body-padding-vertical` | body 上下 padding 合计，默认 `48px`；`noPadding` 为 `0` |
-| `--kne-modal-body-padding-horizontal` | body 左右 padding 合计，默认 `48px`；`noPadding` 为 `0` |
-| `--kne-modal-body-height` | body 容器高度（**不**扣 body padding） |
-| `--kne-modal-content-height` | 内容高度；默认 `body-height − padding-vertical`。`bodyScroll={false}` 时在 `.modal-body` 内覆盖为 `100%`（相对 body 实高），供内部滚动容器使用 |
-| `--kne-modal-body-min-height` / `--kne-modal-body-max-height` | body 容器 min/max |
-| `--kne-modal-content-min-height` | content 侧 min |
-| `--kne-modal-content-width` | 内容宽度契约（扣 horizontal padding） |
+| 变量                                                          | 说明                                                                                                                                                                                                               |
+| ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `--kne-modal-viewport-height`                                 | 默认 `var(--kne-viewport-height, 100vh)`                                                                                                                                                                           |
+| `--kne-modal-viewport-width`                                  | 默认 `var(--kne-viewport-width, 100vw)`                                                                                                                                                                            |
+| `--kne-modal-title-height`                                    | 标题区高度贡献，默认 `48px`；无 title 为 `0`                                                                                                                                                                       |
+| `--kne-modal-footer-height`                                   | footer 高度贡献，默认 `58px`；无 footer 为 `0`                                                                                                                                                                     |
+| `--kne-modal-viewport-gutter`                                 | 桌面相对视口留白合计，默认 `80px`；移动全屏 `0`                                                                                                                                                                    |
+| `--kne-modal-body-padding-vertical`                           | body 上下 padding 合计，默认 `48px`；`noPadding` 为 `0`                                                                                                                                                            |
+| `--kne-modal-body-padding-horizontal`                         | body 左右 padding 合计，默认 `48px`；`noPadding` 为 `0`                                                                                                                                                            |
+| `--kne-modal-body-height`                                     | body **上限**高度公式（`100vh − title − footer − gutter`，**不**扣 body padding）；`bodyScroll={false}` 时作为 body 实高                                                                                             |
+| `--kne-modal-content-height`                                  | 内容高度；默认 `body-height − padding-vertical`。`bodyScroll={false}` 时在 `.modal-body` 内覆盖为 `100%`（相对 body 实高），供内部滚动容器使用                                                                     |
+| `--kne-modal-body-min-height` / `--kne-modal-body-max-height` | body 容器 min/max。min 随 `size`：small 基准 300、default/large 基准 500，再扣 title/footer chrome；CSS 回退 small `252px` / 其它 `394px`。max 等于 `body-height`。桌面默认滚动：`height:auto`，不低于 min、不超过 max |
+| `--kne-modal-content-min-height`                              | content 侧 min（默认随 body-min − padding）                                                                                                                                                                        |
+| `--kne-modal-content-width`                                   | 内容宽度契约（扣 horizontal padding）                                                                                                                                                                              |
 
 #### 布局组合（Modal / Drawer 共用）
 
@@ -2536,10 +2362,10 @@ Tabs / 分栏弹层须 **`bodyScroll={false}`**，此时默认 **noPadding**（
 
 ##### modalClassNames
 
-| 常量 | 值 | 用途 |
-|------|-----|------|
+| 常量        | 值                       | 用途                               |
+| ----------- | ------------------------ | ---------------------------------- |
 | `stepsForm` | `react-modal-steps-form` | 分步弹窗挂 `className`，去横向溢出 |
-| `splitter` | `react-modal-splitter` | antd Splitter 在弹层内的高度链 |
+| `splitter`  | `react-modal-splitter`   | antd Splitter 在弹层内的高度链     |
 
 ##### createModalRender
 
@@ -2551,11 +2377,11 @@ createModalRender(modalDefaults) => (hostProps) => Modal
 
 推荐 `modalDefaults`：
 
-| 场景 | modalDefaults |
-|------|---------------|
-| 子内容自带 Footer | `{ footerButtons: [] }` |
-| 长内容 | `{ footerButtons: [], bodyScroll: true, size: 'large' }` |
-| 分步弹窗 | `{ footerButtons: [], bodyScroll: true, size: 'default', className: modalClassNames.stepsForm }` |
+| 场景              | modalDefaults                                                                                    |
+| ----------------- | ------------------------------------------------------------------------------------------------ |
+| 子内容自带 Footer | `{ footerButtons: [] }`                                                                          |
+| 长内容            | `{ footerButtons: [], bodyScroll: true, size: 'large' }`                                         |
+| 分步弹窗          | `{ footerButtons: [], bodyScroll: true, size: 'default', className: modalClassNames.stepsForm }` |
 
 #### Drawer
 
@@ -2563,11 +2389,11 @@ createModalRender(modalDefaults) => (hostProps) => Modal
 
 ##### 属性（差异与补充）
 
-| 属性 | 类型 | 默认值 | 描述 |
-|------|------|--------|------|
-| placement | `left` \| `right` \| `top` \| `bottom` | `right` | 滑出方向；`size` 映射 width（left/right）或 height（top/bottom） |
-| size | `small` \| `default` \| `large` | `default` | 600 / 1000 / min(vw−64, 1500) px |
-| 移动端 | - | 侧滑全宽 | left/right → 100vw；top/bottom → 100vh（非 Modal 式全屏居中） |
+| 属性      | 类型                                   | 默认值    | 描述                                                             |
+| --------- | -------------------------------------- | --------- | ---------------------------------------------------------------- |
+| placement | `left` \| `right` \| `top` \| `bottom` | `right`   | 滑出方向；`size` 映射 width（left/right）或 height（top/bottom） |
+| size      | `small` \| `default` \| `large`        | `default` | 600 / 1000 / min(vw−64, 1500) px                                 |
+| 移动端    | -                                      | 侧滑全宽  | left/right → 100vw；top/bottom → 100vh（非 Modal 式全屏居中）    |
 
 其余 `open` / `onClose` / `title` / `children` / `footer` / `footerButtons` / `bodyScroll` / `noPadding` / `closable` / `maskClosable` / `getContainer` 等与 Modal 相同。
 
@@ -2590,4 +2416,3 @@ createDrawerRender(drawerDefaults) => (hostProps) => Drawer
 ```
 
 单参数合并渲染；宿主字段映射由 `renderModal` 回调内完成（同 `createModalRender`）。
-