1

_doc/完整使用文档.md

@@ -719,10 +719,136 @@ const params = await paramSetupServer.getOne('sys_title')
     <Editor v-model="content" />
     <UploadSingle v-model="fileUrl" />
     <TreeGrid :data="treeData" />
+    <FloatPanel ref="floatPanel" title="详情面板" position="right" />
   </div>
 </template>
 ```
 
+#### FloatPanel - 浮动面板组件
+
+`FloatPanel` 是一个浮动在父窗体上的面板组件，类似于抽屉效果，调用方式和 `AsyncModal` 类似。
+
+**基本使用：**
+
+```vue
+<template>
+  <div>
+    <Button @click="showPanel">打开浮动面板</Button>
+    
+    <FloatPanel
+      ref="floatPanel"
+      title="详情面板"
+      position="right"
+      :width="800"
+      :show-back="true"
+      back-text="返回"
+      @back="handleBack"
+    >
+      <div>这里是面板内容</div>
+      
+      <template slot="footer">
+        <Button @click="hidePanel">取消</Button>
+        <Button type="primary" @click="handleSave">保存</Button>
+      </template>
+    </FloatPanel>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    showPanel() {
+      this.$refs.floatPanel.show()
+    },
+    hidePanel() {
+      this.$refs.floatPanel.hide()
+    },
+    handleBack() {
+      console.log('返回按钮被点击')
+      this.hidePanel()
+    },
+    handleSave() {
+      console.log('保存')
+      this.hidePanel()
+    }
+  }
+}
+</script>
+```
+
+**调用方式（类似 AsyncModal）：**
+
+```vue
+<template>
+  <div>
+    <Button @click="openPanel">打开面板</Button>
+    
+    <FloatPanel ref="floatPanel" title="详情" position="right">
+      <div>内容</div>
+    </FloatPanel>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    openPanel() {
+      // 通过 ref 调用 show 方法
+      this.$refs.floatPanel.show()
+    },
+    closePanel() {
+      // 通过 ref 调用 hide 方法
+      this.$refs.floatPanel.hide()
+    }
+  }
+}
+</script>
+```
+
+**属性说明：**
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `title` | String | `''` | 面板标题 |
+| `width` | String/Number | `'80%'` | 面板宽度（字符串或数字） |
+| `height` | String/Number | `'80%'` | 面板高度（字符串或数字） |
+| `position` | String | `'right'` | 面板位置：`left`、`right`、`top`、`bottom`、`center` |
+| `showBack` | Boolean | `true` | 是否显示返回按钮 |
+| `showClose` | Boolean | `false` | 是否显示关闭按钮 |
+| `backText` | String | `'返回'` | 返回按钮文字 |
+| `closeOnClickBackdrop` | Boolean | `false` | 点击遮罩是否关闭 |
+| `mask` | Boolean | `true` | 是否显示遮罩 |
+| `zIndex` | Number | `1000` | 层级 |
+
+**方法：**
+
+| 方法 | 说明 | 参数 |
+|------|------|------|
+| `show(callback)` | 显示面板 | `callback`: 可选的回调函数 |
+| `hide()` | 隐藏面板 | - |
+
+**事件：**
+
+| 事件 | 说明 | 参数 |
+|------|------|------|
+| `back` | 点击返回按钮时触发 | - |
+
+**插槽：**
+
+| 插槽 | 说明 |
+|------|------|
+| `default` | 面板主体内容 |
+| `header-right` | 头部右侧内容 |
+| `footer` | 底部内容 |
+
+**位置说明：**
+
+- `left`: 从左侧滑入
+- `right`: 从右侧滑入（默认）
+- `top`: 从顶部滑入
+- `bottom`: 从底部滑入
+- `center`: 居中显示，带缩放动画
+
 ---
 
 ## 🛠️ 开发指南