diff --git a/ui/src/views/document/component/GenerateRelatedDialog.vue b/ui/src/components/generate-related-dialog/index.vue
similarity index 73%
rename from ui/src/views/document/component/GenerateRelatedDialog.vue
rename to ui/src/components/generate-related-dialog/index.vue
index 4a50a446df4..e96f65d8d51 100644
--- a/ui/src/views/document/component/GenerateRelatedDialog.vue
+++ b/ui/src/components/generate-related-dialog/index.vue
@@ -20,7 +20,10 @@
           </div>
           <div class="ml-12 lighter">
             <p>提示词中的 {data} 为分段内容的占位符，执行时替换为分段内容发送给 AI 模型；</p>
-            <p>AI 模型根据分段内容生成相关问题，请将生成的问题放至&lt;question&gt;&lt;/question&gt;标签中，系统会自动关联标签中的问题；</p>
+            <p>
+              AI
+              模型根据分段内容生成相关问题，请将生成的问题放至&lt;question&gt;&lt;/question&gt;标签中，系统会自动关联标签中的问题；
+            </p>
             <p>生成效果依赖于所选模型和提示词，用户可自行调整至最佳效果。</p>
           </div>
         </div>
@@ -45,16 +48,13 @@
                 class="flex-between"
               >
                 <div class="flex align-center">
-                        <span
-                          v-html="relatedObject(providerOptions, label, 'provider')?.icon"
-                          class="model-icon mr-8"
-                        ></span>
+                  <span
+                    v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                    class="model-icon mr-8"
+                  ></span>
                   <span>{{ item.name }}</span>
-                  <el-tag
-                    v-if="item.permission_type === 'PUBLIC'"
-                    type="info"
-                    class="info-tag ml-8"
-                  >公用
+                  <el-tag v-if="item.permission_type === 'PUBLIC'" type="info" class="info-tag ml-8"
+                    >公用
                   </el-tag>
                 </div>
                 <el-icon class="check-icon" v-if="item.id === form.model_id">
@@ -71,14 +71,14 @@
                 disabled
               >
                 <div class="flex">
-                        <span
-                          v-html="relatedObject(providerOptions, label, 'provider')?.icon"
-                          class="model-icon mr-8"
-                        ></span>
+                  <span
+                    v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                    class="model-icon mr-8"
+                  ></span>
                   <span>{{ item.name }}</span>
                   <span class="danger">{{
-                      $t('views.application.applicationForm.form.aiModel.unavailable')
-                    }}</span>
+                    $t('views.application.applicationForm.form.aiModel.unavailable')
+                  }}</span>
                 </div>
                 <el-icon class="check-icon" v-if="item.id === form.model_id">
                   <Check />
@@ -88,16 +88,9 @@
           </el-select>
         </el-form-item>
         <el-form-item label="提示词" prop="prompt">
-          <el-input
-            v-model="form.prompt"
-            placeholder="请输入提示词"
-            :rows="7"
-            type="textarea"
-          />
+          <el-input v-model="form.prompt" placeholder="请输入提示词" :rows="7" type="textarea" />
         </el-form-item>
       </el-form>
-
-
     </div>
     <template #footer>
       <span class="dialog-footer">
@@ -113,11 +106,11 @@
 import { reactive, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import documentApi from '@/api/document'
-
+import paragraphApi from '@/api/paragraph'
+import datasetApi from '@/api/dataset'
 import useStore from '@/stores'
 import { relatedObject } from '@/utils/utils'
 import type { Provider } from '@/api/type/model'
-import datasetApi from '@/api/dataset'
 import { groupBy } from 'lodash'
 import { MsgSuccess } from '@/utils/message'
 import { t } from '@/locales'
@@ -125,12 +118,11 @@ import type { FormInstance } from 'element-plus'
 
 const route = useRoute()
 const {
-  params: { id } // id为datasetID
+  params: { id, documentId } // id为datasetID
 } = route as any
 
 const { model, prompt, user } = useStore()
 
-
 const emit = defineEmits(['refresh'])
 
 const loading = ref<boolean>(false)
@@ -138,23 +130,23 @@ const loading = ref<boolean>(false)
 const dialogVisible = ref<boolean>(false)
 const modelOptions = ref<any>(null)
 const providerOptions = ref<Array<Provider>>([])
-const documentIdList = ref<string[]>([])
+const idList = ref<string[]>([])
+const apiType = ref('') // 文档document或段落paragraph
 
 const FormRef = ref()
 const userId = user.userInfo?.id as string
 const form = ref(prompt.get(userId))
 
-
 const rules = reactive({
   model_id: [{ required: true, message: '请选择AI 模型', trigger: 'blur' }],
   prompt: [{ required: true, message: '请输入提示词', trigger: 'blur' }]
 })
 
-
-const open = (document_ids: string[]) => {
+const open = (ids: string[], type: string) => {
   getProvider()
   getModel()
-  documentIdList.value = document_ids
+  idList.value = ids
+  apiType.value = type
   dialogVisible.value = true
 }
 
@@ -166,17 +158,25 @@ const submitHandle = async (formEl: FormInstance) => {
     if (valid) {
       // 保存提示词
       prompt.save(user.userInfo?.id as string, form.value)
-      const data = { ...form.value, document_id_list: documentIdList.value }
-      documentApi.batchGenerateRelated(id, data).then(() => {
-        MsgSuccess('生成问题成功')
-        emit('refresh')
-        dialogVisible.value = false
-      })
+      if (apiType.value === 'paragraph') {
+        const data = { ...form.value, paragraph_id_list: idList.value }
+        paragraphApi.batchGenerateRelated(id, documentId, data).then(() => {
+          MsgSuccess('生成问题成功')
+          emit('refresh')
+          dialogVisible.value = false
+        })
+      } else if (apiType.value === 'document') {
+        const data = { ...form.value, document_id_list: idList.value }
+        documentApi.batchGenerateRelated(id, data).then(() => {
+          MsgSuccess('生成问题成功')
+          emit('refresh')
+          dialogVisible.value = false
+        })
+      }
     }
   })
 }
 
-
 function getModel() {
   loading.value = true
   datasetApi
@@ -203,26 +203,9 @@ function getProvider() {
     })
 }
 
-
 defineExpose({ open })
 </script>
 <style lang="scss" scope>
-.select-dataset-dialog {
-  padding: 10px;
-
-  .el-dialog__header {
-    padding: 24px 24px 0 8px;
-  }
-
-  .el-dialog__body {
-    padding: 8px !important;
-  }
-
-  .el-dialog__footer {
-    padding: 0 24px 24px;
-  }
-}
-
 .update-info {
   background: #d6e2ff;
   line-height: 25px;
diff --git a/ui/src/views/application-workflow/component/DropdownMenu.vue b/ui/src/views/application-workflow/component/DropdownMenu.vue
index 43acc7244c1..14dc1dea14c 100644
--- a/ui/src/views/application-workflow/component/DropdownMenu.vue
+++ b/ui/src/views/application-workflow/component/DropdownMenu.vue
@@ -41,7 +41,7 @@
             <component :is="iconComponent(`function-lib-node-icon`)" class="mr-8 mt-4" :size="32" />
             <div class="pre-wrap">
               <div class="lighter">{{ functionNode.label }}</div>
-              <el-text type="info" size="small" >{{ functionNode.text }}</el-text>
+              <el-text type="info" size="small">{{ functionNode.text }}</el-text>
             </div>
           </div>
 
@@ -51,14 +51,19 @@
               @click.stop="clickNodes(functionLibNode, item, 'function')"
               @mousedown.stop="onmousedown(functionLibNode, item, 'function')"
             >
-              <component
-                :is="iconComponent(`function-lib-node-icon`)"
-                class="mr-8"
-                :size="32"
-              />
+              <component :is="iconComponent(`function-lib-node-icon`)" class="mr-8" :size="32" />
               <div class="pre-wrap">
-                <div class="lighter">{{ item.name }}</div>
-                <el-text type="info" size="small" v-if="item.desc">{{ item.desc }}</el-text>
+                <div class="lighter ellipsis-1" :title="item.name">{{ item.name }}</div>
+                <p>
+                  <el-text
+                    class="ellipsis-1"
+                    type="info"
+                    size="small"
+                    :title="item.desc"
+                    v-if="item.desc"
+                    >{{ item.desc }}</el-text
+                  >
+                </p>
               </div>
             </div>
           </template>
@@ -83,7 +88,16 @@
                   <div class="lighter ellipsis" :title="item.name">
                     {{ item.name }}
                   </div>
-                  <el-text type="info" size="small" style="width: 80%" v-if="item.desc">{{ item.desc }}</el-text>
+                  <p>
+                    <el-text
+                      class="ellipsis"
+                      type="info"
+                      size="small"
+                      :title="item.desc"
+                      v-if="item.desc"
+                      >{{ item.desc }}</el-text
+                    >
+                  </p>
                 </div>
                 <div class="status-tag" style="margin-left: auto">
                   <el-tag type="warning" v-if="isWorkFlow(item.type)" style="height: 22px"
diff --git a/ui/src/views/document/index.vue b/ui/src/views/document/index.vue
index 6f9c72892b4..c7d0d3cf82e 100644
--- a/ui/src/views/document/index.vue
+++ b/ui/src/views/document/index.vue
@@ -438,7 +438,7 @@ import { hitHandlingMethod } from '@/enums/document'
 import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
 import useStore from '@/stores'
 import StatusVlue from '@/views/document/component/Status.vue'
-import GenerateRelatedDialog from '@/views/document/component/GenerateRelatedDialog.vue'
+import GenerateRelatedDialog from '@/components/generate-related-dialog/index.vue'
 import { TaskType, State } from '@/utils/status'
 const router = useRouter()
 const route = useRoute()
@@ -562,9 +562,6 @@ const cancelTask = (row: any, task_type: number) => {
     MsgSuccess('发送成功')
   })
 }
-function syncDataset() {
-  SyncWebDialogRef.value.open(id)
-}
 
 function importDoc() {
   title.value = '导入文档'
@@ -706,18 +703,6 @@ function batchRefresh() {
   })
 }
 
-function batchGenerateRelated() {
-  const arr: string[] = []
-  multipleSelection.value.map((v) => {
-    if (v) {
-      arr.push(v.id)
-    }
-  })
-  documentApi.batchGenerateRelated(id, arr, loading).then(() => {
-    MsgSuccess('批量生成问题成功')
-    multipleTableRef.value?.clearSelection()
-  })
-}
 
 function deleteDocument(row: any) {
   MsgConfirm(
@@ -827,7 +812,7 @@ function openGenerateDialog(row?: any) {
     })
   }
 
-  GenerateRelatedDialogRef.value.open(arr)
+  GenerateRelatedDialogRef.value.open(arr, 'document')
 }
 
 onMounted(() => {
diff --git a/ui/src/views/paragraph/component/GenerateRelatedDialog.vue b/ui/src/views/paragraph/component/GenerateRelatedDialog.vue
deleted file mode 100644
index 77785128911..00000000000
--- a/ui/src/views/paragraph/component/GenerateRelatedDialog.vue
+++ /dev/null
@@ -1,236 +0,0 @@
-<template>
-  <el-dialog
-    title="生成问题"
-    v-model="dialogVisible"
-    width="600"
-    class="select-dataset-dialog"
-    :close-on-click-modal="false"
-    :close-on-press-escape="false"
-  >
-    <template #header="{ titleId, titleClass }">
-      <div class="my-header flex">
-        <h4 :id="titleId" :class="titleClass">生成问题</h4>
-      </div>
-    </template>
-    <div class="content-height">
-      <el-form
-        ref="FormRef"
-        :model="form"
-        :rules="rules"
-        label-position="top"
-        require-asterisk-position="right"
-      >
-        <div class="update-info flex border-r-4 mb-16 w-full">
-          <div class="mt-4">
-            <AppIcon iconName="app-warning-colorful" style="font-size: 16px"></AppIcon>
-          </div>
-          <div class="ml-16 lighter">
-            <p>提示词中的 {data} 为分段内容的占位符，执行时替换为分段内容发送给 AI 模型；</p>
-            <p>AI
-              模型根据分段内容生成相关问题，请将生成的问题放至&lt;question&gt;&lt;/question&gt;标签中，系统会自动关联标签中的问题；</p>
-            <p>生成效果依赖于所选模型和提示词，用户可自行调整至最佳效果。</p>
-          </div>
-        </div>
-        <el-form-item label="AI 模型" prop="model_id">
-          <el-select
-            v-model="form.model_id"
-            :placeholder="$t('views.application.applicationForm.form.aiModel.placeholder')"
-            class="w-full"
-            popper-class="select-model"
-            :clearable="true"
-          >
-            <el-option-group
-              v-for="(value, label) in modelOptions"
-              :key="value"
-              :label="relatedObject(providerOptions, label, 'provider')?.name"
-            >
-              <el-option
-                v-for="item in value.filter((v: any) => v.status === 'SUCCESS')"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-                class="flex-between"
-              >
-                <div class="flex align-center">
-                        <span
-                          v-html="relatedObject(providerOptions, label, 'provider')?.icon"
-                          class="model-icon mr-8"
-                        ></span>
-                  <span>{{ item.name }}</span>
-                  <el-tag
-                    v-if="item.permission_type === 'PUBLIC'"
-                    type="info"
-                    class="info-tag ml-8"
-                  >公用
-                  </el-tag>
-                </div>
-                <el-icon class="check-icon" v-if="item.id === form.model_id">
-                  <Check />
-                </el-icon>
-              </el-option>
-              <!-- 不可用 -->
-              <el-option
-                v-for="item in value.filter((v: any) => v.status !== 'SUCCESS')"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-                class="flex-between"
-                disabled
-              >
-                <div class="flex">
-                        <span
-                          v-html="relatedObject(providerOptions, label, 'provider')?.icon"
-                          class="model-icon mr-8"
-                        ></span>
-                  <span>{{ item.name }}</span>
-                  <span class="danger">{{
-                      $t('views.application.applicationForm.form.aiModel.unavailable')
-                    }}</span>
-                </div>
-                <el-icon class="check-icon" v-if="item.id === form.model_id">
-                  <Check />
-                </el-icon>
-              </el-option>
-            </el-option-group>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="提示词" prop="prompt">
-          <el-input
-            v-model="form.prompt"
-            placeholder="请输入提示词"
-            :rows="7"
-            type="textarea"
-          />
-        </el-form-item>
-      </el-form>
-
-
-    </div>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
-        <el-button type="primary" @click="submitHandle(FormRef)" :disabled="!model || loading">
-          确定
-        </el-button>
-      </span>
-    </template>
-  </el-dialog>
-</template>
-<script setup lang="ts">
-import { reactive, ref } from 'vue'
-import { useRoute } from 'vue-router'
-import paragraphApi from '@/api/paragraph'
-
-import useStore from '@/stores'
-import { relatedObject } from '@/utils/utils'
-import type { Provider } from '@/api/type/model'
-import datasetApi from '@/api/dataset'
-import { groupBy } from 'lodash'
-import { MsgSuccess } from '@/utils/message'
-import type { FormInstance } from 'element-plus'
-
-const route = useRoute()
-const {
-  params: { id, documentId } // id为datasetID
-} = route as any
-
-const { model, prompt, user } = useStore()
-
-const emit = defineEmits(['refresh'])
-
-const loading = ref<boolean>(false)
-
-const dialogVisible = ref<boolean>(false)
-const modelOptions = ref<any>(null)
-const providerOptions = ref<Array<Provider>>([])
-const paragraphIdList = ref<string[]>([])
-
-const FormRef = ref()
-
-const userId = user.userInfo?.id as string
-const form = ref(prompt.get(userId))
-
-
-const rules = reactive({
-  model_id: [{ required: true, message: '请选择AI 模型', trigger: 'blur' }],
-  prompt: [{ required: true, message: '请输入提示词', trigger: 'blur' }]
-})
-
-const open = (paragraph_ids: string[]) => {
-  getProvider()
-  getModel()
-  paragraphIdList.value = paragraph_ids
-  dialogVisible.value = true
-}
-
-const submitHandle = async (formEl: FormInstance) => {
-  if (!formEl) {
-    return
-  }
-  await formEl.validate((valid, fields) => {
-    if (valid) {
-      // 保存提示词
-      prompt.save(user.userInfo?.id as string, form.value)
-
-      const data = { ...form.value, paragraph_id_list: paragraphIdList.value }
-      paragraphApi.batchGenerateRelated(id, documentId, data).then(() => {
-        MsgSuccess('生成问题成功')
-        emit('refresh')
-        dialogVisible.value = false
-      })
-    }
-  })
-}
-
-
-function getModel() {
-  loading.value = true
-  datasetApi
-    .getDatasetModel(id)
-    .then((res: any) => {
-      modelOptions.value = groupBy(res?.data, 'provider')
-      loading.value = false
-    })
-    .catch(() => {
-      loading.value = false
-    })
-}
-
-function getProvider() {
-  loading.value = true
-  model
-    .asyncGetProvider()
-    .then((res: any) => {
-      providerOptions.value = res?.data
-      loading.value = false
-    })
-    .catch(() => {
-      loading.value = false
-    })
-}
-
-
-defineExpose({ open })
-</script>
-<style lang="scss" scope>
-.select-dataset-dialog {
-  padding: 10px;
-
-  .el-dialog__header {
-    padding: 24px 24px 0 8px;
-  }
-
-  .el-dialog__body {
-    padding: 8px !important;
-  }
-
-  .el-dialog__footer {
-    padding: 0 24px 24px;
-  }
-}
-
-.update-info {
-  background: #d6e2ff;
-  line-height: 25px;
-}
-</style>
diff --git a/ui/src/views/paragraph/index.vue b/ui/src/views/paragraph/index.vue
index 19b39865e2e..2102ed10f93 100644
--- a/ui/src/views/paragraph/index.vue
+++ b/ui/src/views/paragraph/index.vue
@@ -172,10 +172,11 @@ import documentApi from '@/api/document'
 import paragraphApi from '@/api/paragraph'
 import ParagraphDialog from './component/ParagraphDialog.vue'
 import SelectDocumentDialog from './component/SelectDocumentDialog.vue'
+import GenerateRelatedDialog from '@/components/generate-related-dialog/index.vue'
 import { numberFormat } from '@/utils/utils'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
 import useStore from '@/stores'
-import GenerateRelatedDialog from './component/GenerateRelatedDialog.vue'
+
 const { paragraph } = useStore()
 const route = useRoute()
 const {
@@ -350,7 +351,7 @@ function openGenerateDialog(row?: any) {
     })
   }
 
-  GenerateRelatedDialogRef.value.open(arr)
+  GenerateRelatedDialogRef.value.open(arr, 'paragraph')
 }
 
 onMounted(() => {