From 212d7987889571125133c954f3e94958385ed4be Mon Sep 17 00:00:00 2001
From: Lemon <1599456917@qq.com>
Date: Sat, 22 Feb 2025 11:53:27 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81=20?=
 =?UTF-8?q?=E5=BC=B9=E6=A1=86=E8=A1=A8=E5=8D=95=E8=AF=A6=E6=83=85=20?=
 =?UTF-8?q?=E5=BD=93=E6=B5=81=E7=A8=8B=E8=A1=A8=E5=8D=95=E8=BF=87=E9=95=BF?=
 =?UTF-8?q?=E6=97=B6=E5=80=99=E5=A2=9E=E5=8A=A0=E5=AF=B9=E5=BA=94=E5=BE=80?=
 =?UTF-8?q?=E4=B8=8A=E5=BE=80=E4=B8=8B=E8=B7=B3=E8=BD=AC=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E5=B9=B6=E5=86=85=E5=AE=B9=E5=9C=A8=E5=BC=B9=E6=A1=86=E5=86=85?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpm/model/CategoryDraggableModel.vue      | 152 +++++++++++++++++-
 1 file changed, 150 insertions(+), 2 deletions(-)

diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue
index 71b79b781..5f195b46a 100644
--- a/src/views/bpm/model/CategoryDraggableModel.vue
+++ b/src/views/bpm/model/CategoryDraggableModel.vue
@@ -254,8 +254,32 @@
   </Dialog>
 
   <!-- 弹窗：表单详情 -->
-  <Dialog title="表单详情" :fullscreen="true" v-model="formDetailVisible">
-    <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
+  <Dialog title="表单详情" :fullscreen="false" v-model="formDetailVisible" width="800" class="form-detail-dialog">
+    <div class="form-detail-container relative" @scroll="handleScroll">
+      <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
+    </div>
+    
+    <!-- 将滚动按钮组移到 Dialog 组件内，但在 form-detail-container 外 -->
+    <div class="scroll-buttons-overlay">
+      <div 
+        v-show="showTopBtn"
+        class="scroll-btn"
+        @click="scrollToTop"
+      >
+        <el-icon :size="20">
+          <ArrowUpBold />
+        </el-icon>
+      </div>
+      <div 
+        v-show="showBottomBtn"
+        class="scroll-btn"
+        @click="scrollToBottom"
+      >
+        <el-icon :size="20">
+          <ArrowDownBold />
+        </el-icon>
+      </div>
+    </div>
   </Dialog>
 </template>
 
@@ -274,6 +298,8 @@ import { cloneDeep, isEqual } from 'lodash-es'
 import { useTagsView } from '@/hooks/web/useTagsView'
 import { useDebounceFn } from '@vueuse/core'
 import { subString } from '@/utils/index'
+import { ArrowUpBold, ArrowDownBold } from '@element-plus/icons-vue'
+import { ElBacktop } from 'element-plus'
 
 defineOptions({ name: 'BpmModel' })
 
@@ -609,9 +635,109 @@ watchEffect(() => {
     isExpand.value = false
   }
 })
+
+// 添加顶部按钮显示控制
+const showTopBtn = ref(false)
+
+// 控制底部按钮显示
+const showBottomBtn = ref(false)
+
+// 修改滚动事件处理
+const handleScroll = () => {
+  const container = document.querySelector('.form-detail-container')
+  if (container) {
+    const { scrollTop, scrollHeight, clientHeight } = container
+    // 当滚动到一定距离时显示顶部按钮
+    showTopBtn.value = scrollTop > 100
+    // 当未滚动到底部时显示底部按钮
+    showBottomBtn.value = scrollTop + clientHeight < scrollHeight - 10
+  }
+}
+
+// 添加滚动到顶部方法
+const scrollToTop = () => {
+  const container = document.querySelector('.form-detail-container')
+  if (container) {
+    container.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    })
+  }
+}
+
+// 添加滚动到底部方法
+const scrollToBottom = () => {
+  const container = document.querySelector('.form-detail-container')
+  if (container) {
+    container.scrollTo({
+      top: container.scrollHeight,
+      behavior: 'smooth'
+    })
+  }
+}
+
+// 在组件挂载后添加滚动监听
+onMounted(() => {
+  const container = document.querySelector('.form-detail-container')
+  if (container) {
+    container.addEventListener('scroll', handleScroll)
+  }
+})
+
+// 在组件卸载前移除滚动监听
+onUnmounted(() => {
+  const container = document.querySelector('.form-detail-container')
+  if (container) {
+    container.removeEventListener('scroll', handleScroll)
+  }
+})
 </script>
 
 <style lang="scss">
+.form-detail-dialog.el-dialog {
+  margin: 5vh auto !important;
+  
+  .el-dialog__body {
+    position: relative;
+    padding: 0;
+    height: 70vh; // 设置固定高度
+    max-height: 800px;
+  }
+
+  // 添加遮罩层按钮样式
+  .scroll-buttons-overlay {
+    position: fixed;
+    right: calc(50% - 400px - 60px); // 弹框宽度的一半(400px)加上按钮到弹框的距离(60px)
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    z-index: 2001;
+
+    .scroll-btn {
+      background-color: var(--el-color-primary);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+      cursor: pointer;
+      transition: all 0.3s;
+      opacity: 0.8;
+
+      &:hover {
+        background-color: var(--el-color-primary);
+        opacity: 1;
+        transform: scale(1.1);
+      }
+    }
+  }
+}
+
 .rename-dialog.el-dialog {
   padding: 0 !important;
 
@@ -648,4 +774,26 @@ watchEffect(() => {
     transform: translateZ(0);
   }
 }
+
+.form-detail-container {
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  padding: 20px;
+  position: relative;
+  
+  // 保留滚动条样式
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--el-color-primary-light-5);
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background-color: #f5f7fa;
+  }
+}
 </style>
-- 
Gitee


From 009b17c91d34ca833276f11e5e27304d693cd43a Mon Sep 17 00:00:00 2001
From: Lemon <1599456917@qq.com>
Date: Sat, 22 Feb 2025 19:56:04 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E6=8A=BD=E7=A6=BB=E4=B8=8A=E4=B8=8B?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=8C=89=E9=92=AE=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.local                                    |   2 +-
 src/components/ScrollButtons/index.vue        | 119 ++++++++++++++++++
 .../bpm/model/CategoryDraggableModel.vue      | 115 +----------------
 3 files changed, 124 insertions(+), 112 deletions(-)
 create mode 100644 src/components/ScrollButtons/index.vue

diff --git a/.env.local b/.env.local
index 35765584d..cfecf563f 100644
--- a/.env.local
+++ b/.env.local
@@ -4,7 +4,7 @@ NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径
-VITE_BASE_URL='http://localhost:48080'
+VITE_BASE_URL='http://192.168.3.9:48080'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
 VITE_UPLOAD_TYPE=server
diff --git a/src/components/ScrollButtons/index.vue b/src/components/ScrollButtons/index.vue
new file mode 100644
index 000000000..58afca3d4
--- /dev/null
+++ b/src/components/ScrollButtons/index.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="scroll-buttons-overlay">
+    <div 
+      v-show="showTopBtn"
+      class="scroll-btn"
+      @click="scrollToTop"
+    >
+      <el-icon :size="20">
+        <ArrowUpBold />
+      </el-icon>
+    </div>
+    <div 
+      v-show="showBottomBtn"
+      class="scroll-btn"
+      @click="scrollToBottom"
+    >
+      <el-icon :size="20">
+        <ArrowDownBold />
+      </el-icon>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { ArrowUpBold, ArrowDownBold } from '@element-plus/icons-vue'
+
+const props = defineProps({
+  containerSelector: {
+    type: String,
+    required: true
+  },
+  // 控制按钮显示的滚动阈值
+  scrollThreshold: {
+    type: Number,
+    default: 100
+  }
+})
+
+const showTopBtn = ref(false)
+const showBottomBtn = ref(false)
+
+const handleScroll = () => {
+  const container = document.querySelector(props.containerSelector)
+  if (container) {
+    const { scrollTop, scrollHeight, clientHeight } = container as Element
+    showTopBtn.value = scrollTop > props.scrollThreshold
+    showBottomBtn.value = scrollTop + clientHeight < scrollHeight - 10
+  }
+}
+
+const scrollToTop = () => {
+  const container = document.querySelector(props.containerSelector)
+  if (container) {
+    container.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    })
+  }
+}
+
+const scrollToBottom = () => {
+  const container = document.querySelector(props.containerSelector)
+  if (container) {
+    container.scrollTo({
+      top: (container as Element).scrollHeight,
+      behavior: 'smooth'
+    })
+  }
+}
+
+onMounted(() => {
+  const container = document.querySelector(props.containerSelector)
+  if (container) {
+    container.addEventListener('scroll', handleScroll)
+  }
+})
+
+onUnmounted(() => {
+  const container = document.querySelector(props.containerSelector)
+  if (container) {
+    container.removeEventListener('scroll', handleScroll)
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.scroll-buttons-overlay {
+  position: fixed;
+  right: calc(50% - 400px - 60px);
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  z-index: 2001;
+
+  .scroll-btn {
+    background-color: var(--el-color-primary);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+    cursor: pointer;
+    transition: all 0.3s;
+    opacity: 0.8;
+
+    &:hover {
+      background-color: var(--el-color-primary);
+      opacity: 1;
+      transform: scale(1.1);
+    }
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue
index 5f195b46a..d2f294c6f 100644
--- a/src/views/bpm/model/CategoryDraggableModel.vue
+++ b/src/views/bpm/model/CategoryDraggableModel.vue
@@ -259,27 +259,8 @@
       <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
     </div>
     
-    <!-- 将滚动按钮组移到 Dialog 组件内，但在 form-detail-container 外 -->
-    <div class="scroll-buttons-overlay">
-      <div 
-        v-show="showTopBtn"
-        class="scroll-btn"
-        @click="scrollToTop"
-      >
-        <el-icon :size="20">
-          <ArrowUpBold />
-        </el-icon>
-      </div>
-      <div 
-        v-show="showBottomBtn"
-        class="scroll-btn"
-        @click="scrollToBottom"
-      >
-        <el-icon :size="20">
-          <ArrowDownBold />
-        </el-icon>
-      </div>
-    </div>
+    <!-- 使用新组件替换原来的滚动按钮 -->
+    <ScrollButtons container-selector=".form-detail-container" />
   </Dialog>
 </template>
 
@@ -300,6 +281,7 @@ import { useDebounceFn } from '@vueuse/core'
 import { subString } from '@/utils/index'
 import { ArrowUpBold, ArrowDownBold } from '@element-plus/icons-vue'
 import { ElBacktop } from 'element-plus'
+import ScrollButtons from '@/components/ScrollButtons/index.vue'
 
 defineOptions({ name: 'BpmModel' })
 
@@ -635,62 +617,6 @@ watchEffect(() => {
     isExpand.value = false
   }
 })
-
-// 添加顶部按钮显示控制
-const showTopBtn = ref(false)
-
-// 控制底部按钮显示
-const showBottomBtn = ref(false)
-
-// 修改滚动事件处理
-const handleScroll = () => {
-  const container = document.querySelector('.form-detail-container')
-  if (container) {
-    const { scrollTop, scrollHeight, clientHeight } = container
-    // 当滚动到一定距离时显示顶部按钮
-    showTopBtn.value = scrollTop > 100
-    // 当未滚动到底部时显示底部按钮
-    showBottomBtn.value = scrollTop + clientHeight < scrollHeight - 10
-  }
-}
-
-// 添加滚动到顶部方法
-const scrollToTop = () => {
-  const container = document.querySelector('.form-detail-container')
-  if (container) {
-    container.scrollTo({
-      top: 0,
-      behavior: 'smooth'
-    })
-  }
-}
-
-// 添加滚动到底部方法
-const scrollToBottom = () => {
-  const container = document.querySelector('.form-detail-container')
-  if (container) {
-    container.scrollTo({
-      top: container.scrollHeight,
-      behavior: 'smooth'
-    })
-  }
-}
-
-// 在组件挂载后添加滚动监听
-onMounted(() => {
-  const container = document.querySelector('.form-detail-container')
-  if (container) {
-    container.addEventListener('scroll', handleScroll)
-  }
-})
-
-// 在组件卸载前移除滚动监听
-onUnmounted(() => {
-  const container = document.querySelector('.form-detail-container')
-  if (container) {
-    container.removeEventListener('scroll', handleScroll)
-  }
-})
 </script>
 
 <style lang="scss">
@@ -700,42 +626,9 @@ onUnmounted(() => {
   .el-dialog__body {
     position: relative;
     padding: 0;
-    height: 70vh; // 设置固定高度
+    height: 70vh;
     max-height: 800px;
   }
-
-  // 添加遮罩层按钮样式
-  .scroll-buttons-overlay {
-    position: fixed;
-    right: calc(50% - 400px - 60px); // 弹框宽度的一半(400px)加上按钮到弹框的距离(60px)
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    z-index: 2001;
-
-    .scroll-btn {
-      background-color: var(--el-color-primary);
-      color: white;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 40px;
-      height: 40px;
-      border-radius: 50%;
-      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
-      cursor: pointer;
-      transition: all 0.3s;
-      opacity: 0.8;
-
-      &:hover {
-        background-color: var(--el-color-primary);
-        opacity: 1;
-        transform: scale(1.1);
-      }
-    }
-  }
 }
 
 .rename-dialog.el-dialog {
-- 
Gitee


From bc77178b37b866790fded00f51a1429e39f88cfd Mon Sep 17 00:00:00 2001
From: Lemon <1599456917@qq.com>
Date: Sat, 22 Feb 2025 11:59:44 +0000
Subject: [PATCH 3/4] update .env.local.

Signed-off-by: Lemon <1599456917@qq.com>
---
 .env.local | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.env.local b/.env.local
index cfecf563f..35765584d 100644
--- a/.env.local
+++ b/.env.local
@@ -4,7 +4,7 @@ NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径
-VITE_BASE_URL='http://192.168.3.9:48080'
+VITE_BASE_URL='http://localhost:48080'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
 VITE_UPLOAD_TYPE=server
-- 
Gitee


From 52d38572a16b782637e259c99743d4908a45d3a1 Mon Sep 17 00:00:00 2001
From: Lemon <1599456917@qq.com>
Date: Tue, 25 Feb 2025 16:06:21 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E6=8A=BD=E5=8F=96=E6=88=90=E9=80=9A?=
 =?UTF-8?q?=E7=94=A8=E7=9A=84=20FormPreviewDialog=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FormPreviewDialog/index.vue    | 218 ++++++++++++++++++
 src/components/ScrollButtons/index.vue        | 119 ----------
 .../bpm/model/CategoryDraggableModel.vue      |  28 +--
 3 files changed, 224 insertions(+), 141 deletions(-)
 create mode 100644 src/components/FormPreviewDialog/index.vue
 delete mode 100644 src/components/ScrollButtons/index.vue

diff --git a/src/components/FormPreviewDialog/index.vue b/src/components/FormPreviewDialog/index.vue
new file mode 100644
index 000000000..c6a4c67eb
--- /dev/null
+++ b/src/components/FormPreviewDialog/index.vue
@@ -0,0 +1,218 @@
+<template>
+  <el-dialog
+    :title="title"
+    :model-value="modelValue"
+    @update:model-value="$emit('update:modelValue', $event)"
+    @open="handleDialogOpen"
+    :fullscreen="false"
+    width="800"
+    class="form-preview-dialog"
+    destroy-on-close
+    draggable
+    :close-on-click-modal="false"
+  >
+    <div class="form-preview-wrapper">
+      <div class="form-preview-container" ref="containerRef">
+        <form-create :rule="rule" :option="option" />
+      </div>
+      
+      <!-- 滚动按钮 -->
+      <div class="scroll-buttons" v-if="isDialogOpen">
+        <div 
+          v-show="showTopBtn"
+          class="scroll-btn"
+          @click="scrollToTop"
+        >
+          <el-icon :size="20">
+            <ArrowUpBold />
+          </el-icon>
+        </div>
+        <div 
+          v-show="showBottomBtn"
+          class="scroll-btn"
+          @click="scrollToBottom"
+        >
+          <el-icon :size="20">
+            <ArrowDownBold />
+          </el-icon>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
+import { ArrowUpBold, ArrowDownBold } from '@element-plus/icons-vue'
+import { useDebounceFn } from '@vueuse/core'
+
+defineOptions({ name: 'FormPreviewDialog' })
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  title: {
+    type: String,
+    default: '表单详情'
+  },
+  rule: {
+    type: Array,
+    required: true
+  },
+  option: {
+    type: Object,
+    required: true
+  },
+  scrollThreshold: {
+    type: Number,
+    default: 100
+  }
+})
+
+defineEmits(['update:modelValue'])
+
+const containerRef = ref<HTMLElement | null>(null)
+const showTopBtn = ref(false)
+const showBottomBtn = ref(false)
+const isDialogOpen = ref(false)
+
+// 使用防抖优化滚动性能
+const handleScroll = useDebounceFn(() => {
+  const container = containerRef.value
+  if (container) {
+    const { scrollTop, scrollHeight, clientHeight } = container
+    showTopBtn.value = scrollTop > props.scrollThreshold
+    showBottomBtn.value = scrollTop + clientHeight < scrollHeight - props.scrollThreshold
+  }
+}, 100)
+
+const scrollToTop = () => {
+  const container = containerRef.value
+  if (container) {
+    container.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    })
+  }
+}
+
+const scrollToBottom = () => {
+  const container = containerRef.value
+  if (container) {
+    container.scrollTo({
+      top: container.scrollHeight,
+      behavior: 'smooth'
+    })
+  }
+}
+
+const initScrollButtons = async () => {
+  await nextTick()
+  // 等待内容渲染完成后再检查滚动状态
+  setTimeout(() => {
+    handleScroll()
+  }, 300)
+}
+
+const handleDialogOpen = () => {
+  isDialogOpen.value = true
+  // 初始化滚动监听
+  containerRef.value?.addEventListener('scroll', handleScroll)
+  // 初始化滚动按钮状态
+  initScrollButtons()
+}
+
+onUnmounted(() => {
+  containerRef.value?.removeEventListener('scroll', handleScroll)
+})
+
+// 监听 modelValue 变化，当对话框关闭时重置状态
+watch(() => props.modelValue, (newVal) => {
+  if (!newVal) {
+    isDialogOpen.value = false
+    showTopBtn.value = false
+    showBottomBtn.value = false
+  }
+})
+</script>
+
+<style lang="scss">
+.form-preview-dialog.el-dialog {
+  margin: 5vh auto !important;
+  
+  .el-dialog__body {
+    position: relative;
+    padding: 0;
+    height: 70vh;
+    max-height: 800px;
+  }
+
+  .el-dialog__header {
+    cursor: move;
+    margin: 0;
+    padding: 15px 20px;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.form-preview-wrapper {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.form-preview-container {
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  padding: 20px;
+  
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--el-color-primary-light-5);
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background-color: #f5f7fa;
+  }
+}
+
+.scroll-buttons {
+  position: absolute;
+  right: 20px;
+  bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  z-index: 2001;
+
+  .scroll-btn {
+    background-color: var(--el-color-primary);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+    cursor: pointer;
+    transition: all 0.3s;
+    opacity: 0.8;
+
+    &:hover {
+      background-color: var(--el-color-primary);
+      opacity: 1;
+      transform: scale(1.1);
+    }
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/components/ScrollButtons/index.vue b/src/components/ScrollButtons/index.vue
deleted file mode 100644
index 58afca3d4..000000000
--- a/src/components/ScrollButtons/index.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<template>
-  <div class="scroll-buttons-overlay">
-    <div 
-      v-show="showTopBtn"
-      class="scroll-btn"
-      @click="scrollToTop"
-    >
-      <el-icon :size="20">
-        <ArrowUpBold />
-      </el-icon>
-    </div>
-    <div 
-      v-show="showBottomBtn"
-      class="scroll-btn"
-      @click="scrollToBottom"
-    >
-      <el-icon :size="20">
-        <ArrowDownBold />
-      </el-icon>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
-import { ArrowUpBold, ArrowDownBold } from '@element-plus/icons-vue'
-
-const props = defineProps({
-  containerSelector: {
-    type: String,
-    required: true
-  },
-  // 控制按钮显示的滚动阈值
-  scrollThreshold: {
-    type: Number,
-    default: 100
-  }
-})
-
-const showTopBtn = ref(false)
-const showBottomBtn = ref(false)
-
-const handleScroll = () => {
-  const container = document.querySelector(props.containerSelector)
-  if (container) {
-    const { scrollTop, scrollHeight, clientHeight } = container as Element
-    showTopBtn.value = scrollTop > props.scrollThreshold
-    showBottomBtn.value = scrollTop + clientHeight < scrollHeight - 10
-  }
-}
-
-const scrollToTop = () => {
-  const container = document.querySelector(props.containerSelector)
-  if (container) {
-    container.scrollTo({
-      top: 0,
-      behavior: 'smooth'
-    })
-  }
-}
-
-const scrollToBottom = () => {
-  const container = document.querySelector(props.containerSelector)
-  if (container) {
-    container.scrollTo({
-      top: (container as Element).scrollHeight,
-      behavior: 'smooth'
-    })
-  }
-}
-
-onMounted(() => {
-  const container = document.querySelector(props.containerSelector)
-  if (container) {
-    container.addEventListener('scroll', handleScroll)
-  }
-})
-
-onUnmounted(() => {
-  const container = document.querySelector(props.containerSelector)
-  if (container) {
-    container.removeEventListener('scroll', handleScroll)
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-.scroll-buttons-overlay {
-  position: fixed;
-  right: calc(50% - 400px - 60px);
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  z-index: 2001;
-
-  .scroll-btn {
-    background-color: var(--el-color-primary);
-    color: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
-    cursor: pointer;
-    transition: all 0.3s;
-    opacity: 0.8;
-
-    &:hover {
-      background-color: var(--el-color-primary);
-      opacity: 1;
-      transform: scale(1.1);
-    }
-  }
-}
-</style> 
\ No newline at end of file
diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue
index d2f294c6f..74434f0e6 100644
--- a/src/views/bpm/model/CategoryDraggableModel.vue
+++ b/src/views/bpm/model/CategoryDraggableModel.vue
@@ -254,14 +254,11 @@
   </Dialog>
 
   <!-- 弹窗：表单详情 -->
-  <Dialog title="表单详情" :fullscreen="false" v-model="formDetailVisible" width="800" class="form-detail-dialog">
-    <div class="form-detail-container relative" @scroll="handleScroll">
-      <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
-    </div>
-    
-    <!-- 使用新组件替换原来的滚动按钮 -->
-    <ScrollButtons container-selector=".form-detail-container" />
-  </Dialog>
+  <FormPreviewDialog
+    v-model="formDetailVisible"
+    :rule="formDetailPreview.rule"
+    :option="formDetailPreview.option"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -279,9 +276,7 @@ import { cloneDeep, isEqual } from 'lodash-es'
 import { useTagsView } from '@/hooks/web/useTagsView'
 import { useDebounceFn } from '@vueuse/core'
 import { subString } from '@/utils/index'
-import { ArrowUpBold, ArrowDownBold } from '@element-plus/icons-vue'
-import { ElBacktop } from 'element-plus'
-import ScrollButtons from '@/components/ScrollButtons/index.vue'
+import FormPreviewDialog from '@/components/FormPreviewDialog/index.vue'
 
 defineOptions({ name: 'BpmModel' })
 
@@ -620,17 +615,6 @@ watchEffect(() => {
 </script>
 
 <style lang="scss">
-.form-detail-dialog.el-dialog {
-  margin: 5vh auto !important;
-  
-  .el-dialog__body {
-    position: relative;
-    padding: 0;
-    height: 70vh;
-    max-height: 800px;
-  }
-}
-
 .rename-dialog.el-dialog {
   padding: 0 !important;
 
-- 
Gitee