diff --git a/ui/src/api/API_README.md b/ui/src/api/API_README.md
index 778455644bd..d64beeffe42 100644
--- a/ui/src/api/API_README.md
+++ b/ui/src/api/API_README.md
@@ -573,8 +573,8 @@ Workspace、System 资源管理及 System 共享资源的 `knowledge.ts` 提供
 返回新增分段详情，默认插入首位并触发索引。
 新增载荷可传 `position`，在目标位置插入，用于当前分段上方添加。
 `getParagraphDetail` 查询 `/<paragraphId>`，返回 `ParagraphDetail`，包含 `problem_list`、
-`hit_num` 和 `last_hit_time`。`putParagraph` 向同一路径提交标题和正文，解包后端三元素编辑响应的
-首项为最新详情；不提交 `problem_list`，关联关系通过专属接口维护。
+`hit_num` 和 `last_hit_time`。`putParagraph` 向同一路径提交标题和正文，直接返回最新详情对象；
+后端内部三元素返回值经后置处理转换为详情对象，不作为数组解析。不提交 `problem_list`，关联关系通过专属接口维护。
 编辑载荷使用 `ParagraphEditPayload`，允许仅传 `is_active` 更新启用状态，正文表单仍使用
 必填标题及正文的 `ParagraphUpdatePayload`。`deleteParagraph` DELETE `/<paragraphId>` 删除单个分段。
 `putParagraphPosition` PUT `/adjust_position`，查询参数为 `paragraph_id`、`new_position`，
diff --git a/ui/src/api/admin/workspace/knowledge/paragraph.ts b/ui/src/api/admin/workspace/knowledge/paragraph.ts
index d97ef164eba..42862544ab5 100644
--- a/ui/src/api/admin/workspace/knowledge/paragraph.ts
+++ b/ui/src/api/admin/workspace/knowledge/paragraph.ts
@@ -30,11 +30,9 @@ const postParagraph = (knowledgeId: string, documentId: string, payload: Paragra
 const getParagraphDetail = (knowledgeId: string, documentId: string, paragraphId: string) =>
   get<ParagraphDetail>(`${getPrefix(knowledgeId, documentId)}/${paragraphId}`)
 
-/** 更新分段正文或启用状态，提取后端编辑响应中的最新详情。 */
+/** 更新分段正文或启用状态，返回最新详情。 */
 const putParagraph = (knowledgeId: string, documentId: string, paragraphId: string, payload: ParagraphEditPayload) =>
-  put<ParagraphEditPayload, [ParagraphDetail, ParagraphEditPayload, string]>(`${getPrefix(knowledgeId, documentId)}/${paragraphId}`, payload).then(
-    ([paragraph]) => paragraph,
-  )
+  put<ParagraphEditPayload, ParagraphDetail>(`${getPrefix(knowledgeId, documentId)}/${paragraphId}`, payload)
 
 /** 新增问题并关联到当前分段。 */
 const postParagraphProblem = (knowledgeId: string, documentId: string, paragraphId: string, content: string) =>
diff --git a/ui/src/styles/STYLE_README.md b/ui/src/styles/STYLE_README.md
index 55ab0ac47bc..ebcd2c0daab 100644
--- a/ui/src/styles/STYLE_README.md
+++ b/ui/src/styles/STYLE_README.md
@@ -252,6 +252,12 @@ CSS 自定义属性同样按变量名排序。嵌套选择器、伪类和媒体
 段落卡片使用 `app.scss` 中的 `mk-paragraph-card`，普通模式悬停背景为 N100；多选模式添加
 `selectable`，未选中卡片悬停为主题色边框、白色背景。已选卡片添加 `active`，沿用
 `MkSourceCard` 的主题色边框和 10% 主题色背景，选中背景在悬停时保留。
+禁用样式添加 `disabled`，标题、Markdown 正文和辅助文字使用 N400 浅灰色；此类只改变展示，
+悬停时背景和边框不变色，保留选中和操作交互，实际禁用行为由使用方控制。
+
+```html
+<el-card class="mk-paragraph-card disabled" shadow="never">禁用的段落内容</el-card>
+```
 
 ## 阴影
 
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index d4954f87056..073172deb16 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -181,12 +181,22 @@ h6 {
     border-color: var(--mk-primary) !important;
   }
 
-  &.selectable:hover {
+  &.disabled {
+    color: var(--mk-N400);
+
+    .md-editor-preview,
+    .md-editor-preview *,
+    .text-N600 {
+      color: var(--mk-N400) !important;
+    }
+  }
+
+  &.selectable:not(.disabled):hover {
     background-color: white;
     border-color: var(--mk-primary);
   }
 
-  &:hover {
+  &:not(.disabled):hover {
     background-color: var(--mk-N100);
   }
 }
diff --git a/ui/src/views/VIEW_README.md b/ui/src/views/VIEW_README.md
index 7853b6064b2..9308c4584de 100644
--- a/ui/src/views/VIEW_README.md
+++ b/ui/src/views/VIEW_README.md
@@ -897,6 +897,22 @@ Workspace 普通资源、System 资源管理和 System 共享资源允许打开
 编辑、启停局部替换卡片，删除、迁移局部移除，保留其他已加载数据和滚动位置。
 局部移除后，下一次滚动请求按剩余列表长度定位服务端分页，必要时拼接相邻两页，避免漏载。
 正文使用 `MdPreview`；第一页加载完成且无分段时展示空态。
+左侧目录和右侧卡片分别通过 `useSortable` 绑定同一份分段数组，拖拽图标使用与 `MkFormList`
+一致的 link 按钮、`text-N600` 和 `h-8!`。左右图标均仅在悬浮所属目录项／卡片或获得焦点时显示，
+绝对定位在所属目录项／卡片右侧并向外露出 8px，不占据布局空间；目录图标垂直居中。
+左右均可按住整条目录项／整张卡片或拖拽图标排序，只允许在已加载分段中排序。
+右侧整体过滤悬浮操作区，并过滤正文链接及拖拽图标以外的按钮，保留原有点击行为；
+普通点击卡片仍打开详情，位置保存期间不打开详情；左侧点击手柄不触发目录定位。
+左侧使用普通 `div.paragraph-directory-row` 作为排序行，手柄与 `ElAnchorLink` 并列。
+页面局部 `v-disable-link-drag` 指令将 `ElAnchorLink` 内部的 a 设为 `draggable=false`，
+不使用 `dragstart.prevent`，避免原生链接拖出浏览器，并让整条目录项正常参与 Sortable 排序。
+拖拽后两侧同步重排，通过目标分段原有的真实 `position` 提交位置接口，搜索不改变位置语义。
+成功后同步移动区间内已加载分段的 `position`，失败恢复原顺序；不重新查询或重置列表。
+批量模式、分段加载、删除确认或提交、弹窗打开、位置保存以及不足两条时禁用拖拽。
+拖拽和保存期间暂停滚动补页，保存时仅在标题栏显示状态，不使用整页 loading 遮挡落位动画；
+保存锁继续禁止再次拖拽和修改操作。与 `MkFormList` 一致，两侧使用普通 DOM 容器，
+右侧以普通 `div.paragraph-sort-row` 承载卡片，由 `useSortable` 统一提供 150ms 位移动画；
+不在可排序元素上叠加 `TransitionGroup`，也不直接对带默认过渡样式的 `ElCard` 做位移动画。
 批量选择支持点击整张卡片或复选框切换勾选、全选、取消、“迁移至”、“生成问题”和“删除”；
 复选框阻止点击冒泡，避免重复切换。`document-detail/action-dropdown/migrate/` 集中维护
 批量按钮 `BatchMigrateParagraphAction`、单项菜单 `MigrateParagraphAction` 和 `ParagraphMigrateDialog`，沿用 chat-log 添加知识库的知识库／文档
diff --git a/ui/src/views/document-detail/index.vue b/ui/src/views/document-detail/index.vue
index 6135328f076..10c7dbb694d 100644
--- a/ui/src/views/document-detail/index.vue
+++ b/ui/src/views/document-detail/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useKnowledgeNavigationContext } from '@/views/knowledge-detail/context'
-import { computed, nextTick, onMounted, ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, type Directive } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import type { ElAnchor } from 'element-plus'
 import type MkViewLayout from '@/components/global/mk-view-layout/index.vue'
@@ -10,6 +10,7 @@ import type { ParamsPage } from '@/api/admin/core/types'
 import type { DocumentItem, ParagraphItem, ParagraphQuery } from '@/api/types'
 import { getFileIconUrl } from '@/utils/icon'
 import { MsgConfirm, MsgSuccess } from '@/utils/message'
+import { useSortable, type SortableChange } from '@/utils/use-sortable'
 import CreateParagraphDialog from './paragraph-dialog/CreateParagraphDialog.vue'
 import EditParagraphDialog from './paragraph-dialog/ParagraphDialog.vue'
 import {
@@ -43,21 +44,33 @@ const searchFields = [
 ]
 
 async function loadParagraphPage(pagination: ParamsPage) {
-  // 局部删除后按剩余列表长度接续，最多拼接相邻两页，避免分页偏移导致漏载。
-  const loadedCount = pagination.currentPage === 1 ? 0 : paragraphs.value.length
-  const currentPage = Math.floor(loadedCount / pagination.pageSize) + 1
-  const offset = loadedCount % pagination.pageSize
-  const query = paragraphQuery.value
-  const page = await ParagraphApi.getParagraphPage(knowledgeId.value, documentId.value, { ...pagination, currentPage }, query)
-  let records = page.records.slice(offset)
-  if (offset && currentPage * page.size < page.total) {
-    const nextPage = await ParagraphApi.getParagraphPage(knowledgeId.value, documentId.value, { ...pagination, currentPage: currentPage + 1 }, query)
-    records = [...records, ...nextPage.records].slice(0, pagination.pageSize)
+  // 拖拽及位置保存完成后再接续分页，避免补页改变拖拽索引或读取旧顺序。
+  await paragraphSortSettled
+  paragraphPageLoading.value = true
+  try {
+    // 局部删除后按剩余列表长度接续，最多拼接相邻两页，避免分页偏移导致漏载。
+    const loadedCount = pagination.currentPage === 1 ? 0 : paragraphs.value.length
+    const currentPage = Math.floor(loadedCount / pagination.pageSize) + 1
+    const offset = loadedCount % pagination.pageSize
+    const query = paragraphQuery.value
+    const page = await ParagraphApi.getParagraphPage(knowledgeId.value, documentId.value, { ...pagination, currentPage }, query)
+    let records = page.records.slice(offset)
+    if (offset && currentPage * page.size < page.total) {
+      const nextPage = await ParagraphApi.getParagraphPage(
+        knowledgeId.value,
+        documentId.value,
+        { ...pagination, currentPage: currentPage + 1 },
+        query,
+      )
+      records = [...records, ...nextPage.records].slice(0, pagination.pageSize)
+    }
+    paragraphTotal.value = page.total
+    // 组件页码记录已消费页数，补回局部移除的数量以维持正确的结束判断。
+    const removedCount = (pagination.currentPage - 1) * pagination.pageSize - loadedCount
+    return { ...page, records, current: pagination.currentPage, total: page.total + removedCount }
+  } finally {
+    paragraphPageLoading.value = false
   }
-  paragraphTotal.value = page.total
-  // 组件页码记录已消费页数，补回局部移除的数量以维持正确的结束判断。
-  const removedCount = (pagination.currentPage - 1) * pagination.pageSize - loadedCount
-  return { ...page, records, current: pagination.currentPage, total: page.total + removedCount }
 }
 
 function refreshParagraphs() {
@@ -85,6 +98,12 @@ function handleBack() {
 const layoutRef = ref<InstanceType<typeof MkViewLayout>>()
 const paragraphAnchorRef = ref<InstanceType<typeof ElAnchor>>()
 const paragraphScrollContainer = computed(() => layoutRef.value?.getScrollContainer())
+// AnchorLink 的 a 在组件内部渲染，只关闭链接原生拖动，排序行仍由 Sortable 管理。
+const vDisableLinkDrag: Directive<HTMLElement> = {
+  mounted(element) {
+    element.querySelector('a')?.setAttribute('draggable', 'false')
+  },
+}
 
 /* 批量选择已加载的分段 */
 const batchMode = ref(false)
@@ -102,6 +121,7 @@ function handleSelectBatchParagraph(paragraphId: string, selected: boolean) {
 }
 
 function handleClickParagraphCard(paragraph: ParagraphItem) {
+  if (paragraphMoving.value) return
   if (batchMode.value) {
     handleSelectBatchParagraph(paragraph.id, !selectedParagraphIds.value.includes(paragraph.id))
     return
@@ -174,12 +194,14 @@ const editDialogRef = ref<InstanceType<typeof EditParagraphDialog>>()
 const searchKey = ref(0)
 
 async function handleOpenCreateParagraph(position?: number) {
+  if (paragraphMoving.value) return
   createDialogMounted.value = true
   await nextTick()
   createDialogRef.value?.open(position)
 }
 
 async function handleOpenParagraphDetail(paragraph: ParagraphItem, initialMode: 'detail' | 'edit' = 'detail') {
+  if (paragraphMoving.value) return
   editDialogMounted.value = true
   await nextTick()
   editDialogRef.value?.open(paragraph, initialMode)
@@ -195,17 +217,23 @@ function handleParagraphMenuVisibleChange(paragraphId: string, menu: 'more' | 'p
 }
 
 function handleToggleParagraph(paragraph: ParagraphItem) {
-  if (loading.value) return
+  if (loading.value || paragraphMoving.value) return false
+  loading.value = true
   return ParagraphApi.putParagraph(knowledgeId.value, documentId.value, paragraph.id, { is_active: !paragraph.is_active })
     .then((updatedParagraph) => {
       handleReplaceParagraph(updatedParagraph)
       MsgSuccess('操作成功')
+      // 服务端响应已更新受控开关，阻止 before-change 再触发一次切换。
+      return false
+    })
+    .catch(() => false)
+    .finally(() => {
+      loading.value = false
     })
-    .catch(() => {})
 }
 
 function handleDeleteParagraph(paragraph: ParagraphItem) {
-  if (loading.value) return
+  if (loading.value || paragraphMoving.value) return
   const targetKnowledgeId = knowledgeId.value
   const targetDocumentId = documentId.value
   const targetParagraphId = paragraph.id
@@ -220,7 +248,9 @@ function handleDeleteParagraph(paragraph: ParagraphItem) {
 }
 
 function handleMoveParagraph(paragraph: ParagraphItem, direction: ParagraphMoveDirection) {
-  if (loading.value) return
+  if (loading.value || paragraphMoving.value || paragraphPageLoading.value) return
+  handleParagraphSortStart()
+  paragraphMoving.value = true
   const targetKnowledgeId = knowledgeId.value
   const targetDocumentId = documentId.value
   // 搜索只影响展示；移动始终按完整文档的顺序定位相邻分段。
@@ -252,8 +282,107 @@ function handleMoveParagraph(paragraph: ParagraphItem, direction: ParagraphMoveD
       })
     })
     .catch(() => {})
+    .finally(() => {
+      paragraphMoving.value = false
+      finishParagraphSort()
+    })
+}
+
+/* 左侧目录与右侧卡片共用分段数组和位置保存流程。 */
+const paragraphCardsRef = ref<HTMLElement>()
+const paragraphDirectoryRef = ref<HTMLElement>()
+const paragraphPageLoading = ref(false)
+const paragraphMoving = ref(false)
+const paragraphSortDisabled = computed(
+  () =>
+    loading.value ||
+    paragraphPageLoading.value ||
+    paragraphMoving.value ||
+    batchMode.value ||
+    deleting.value ||
+    deleteConfirming.value ||
+    createDialogMounted.value ||
+    editDialogMounted.value ||
+    paragraphs.value.length < 2,
+)
+let paragraphSortSnapshot: ParagraphItem[] = []
+let paragraphSortSettled: Promise<void> = Promise.resolve()
+let resolveParagraphSort: (() => void) | undefined
+
+function handleParagraphSortStart() {
+  paragraphSortSnapshot = [...paragraphs.value]
+  openParagraphMenuIds.value = { more: '', position: '' }
+  paragraphSortSettled = new Promise((resolve) => {
+    resolveParagraphSort = resolve
+  })
+}
+
+function finishParagraphSort() {
+  paragraphSortSnapshot = []
+  resolveParagraphSort?.()
+  resolveParagraphSort = undefined
+  paragraphSortSettled = Promise.resolve()
+}
+
+function handleParagraphSortEnd() {
+  // 无顺序变化时不会触发保存；有变化时等待请求完成后释放分页。
+  if (!paragraphMoving.value) finishParagraphSort()
+}
+
+function handleParagraphSort({ newIndex, data }: SortableChange<ParagraphItem>) {
+  const previousParagraphs = paragraphSortSnapshot
+  const movedParagraph = data[newIndex]
+  const targetParagraph = previousParagraphs[newIndex]
+  if (!movedParagraph || !targetParagraph) {
+    paragraphs.value = previousParagraphs
+    finishParagraphSort()
+    return
+  }
+  const oldPosition = movedParagraph.position
+  const newPosition = targetParagraph.position
+  paragraphMoving.value = true
+  return ParagraphApi.putParagraphPosition(knowledgeId.value, documentId.value, movedParagraph.id, newPosition)
+    .then(() => {
+      // 库已经重排数组，只同步服务端移动区间内的 position，不再次移动数组。
+      paragraphs.value = paragraphs.value.map((paragraph) => {
+        let position = paragraph.position
+        if (paragraph.id === movedParagraph.id) position = newPosition
+        else if (oldPosition < newPosition && position > oldPosition && position <= newPosition) position -= 1
+        else if (oldPosition > newPosition && position >= newPosition && position < oldPosition) position += 1
+        return position === paragraph.position ? paragraph : { ...paragraph, position }
+      })
+      MsgSuccess('移动成功')
+    })
+    .catch(() => {
+      paragraphs.value = previousParagraphs
+    })
+    .finally(() => {
+      paragraphMoving.value = false
+      finishParagraphSort()
+    })
 }
 
+useSortable(paragraphDirectoryRef, paragraphs, () => ({
+  disabled: paragraphSortDisabled.value,
+  filter: 'button:not(.paragraph-directory-drag-handle)',
+  preventOnFilter: false,
+  draggable: '> .paragraph-directory-row',
+  onStart: handleParagraphSortStart,
+  onEnd: handleParagraphSortEnd,
+  onReorder: handleParagraphSort,
+}))
+useSortable(paragraphCardsRef, paragraphs, () => ({
+  disabled: paragraphSortDisabled.value,
+  // 整张卡片可拖拽，操作区和正文链接保持原有点击行为。
+  filter: '.paragraph-card-actions, a, button:not(.paragraph-card-drag__handle)',
+  preventOnFilter: false,
+  draggable: '> .paragraph-sort-row',
+  onStart: handleParagraphSortStart,
+  onEnd: handleParagraphSortEnd,
+  onReorder: handleParagraphSort,
+}))
+onBeforeUnmount(finishParagraphSort)
+
 function handleCreateParagraphSuccess() {
   paragraphQuery.value = {}
   searchKey.value += 1
@@ -276,7 +405,7 @@ onMounted(() => {
 <template>
   <MkViewLayout ref="layoutRef" title="" :loading="loading" collapsible class="[&_aside+button]:top-4!">
     <template #top>
-      <div class="flex-between gap-4">
+      <div class="flex-between gap-4" :inert="paragraphMoving">
         <div class="flex-align-center min-w-0 gap-2">
           <!-- 返回文档列表 -->
           <el-button text @click="handleBack"><MkIcon name="icon_arrow-left_outlined" :size="20" /></el-button>
@@ -311,126 +440,155 @@ onMounted(() => {
           select-scroll-top
           @click.prevent
         >
-          <!-- 定位文档分段 -->
-          <el-anchor-link v-for="paragraph in paragraphs" :key="paragraph.id" :href="`#paragraph-${paragraph.id}`">
-            <div
-              class="truncate rounded-md px-2 py-1 font-normal text-N600 hover:bg-N900/10 [.is-active_&]:text-primary"
-              :title="paragraph.title || ''"
-            >
-              {{ paragraph.title || '-' }}
-            </div>
-          </el-anchor-link>
+          <div ref="paragraphDirectoryRef">
+            <template v-for="paragraph in paragraphs" :key="paragraph.id">
+              <div class="paragraph-directory-row group relative">
+                <!-- 拖拽排序分段目录；手柄与链接并列，避免触发链接原生拖动 -->
+                <el-button
+                  v-if="!batchMode"
+                  link
+                  class="paragraph-directory-drag-handle group-hover-visible absolute! top-1/2 -left-4 z-10 -translate-y-1/2 text-N600 h-8!"
+                  :disabled="paragraphSortDisabled"
+                  @click.prevent.stop
+                >
+                  <MkIcon name="icon_drag_outlined" />
+                </el-button>
+                <!-- 定位文档分段 -->
+                <el-anchor-link v-disable-link-drag :href="`#paragraph-${paragraph.id}`">
+                  <div
+                    class="flex-align-center gap-2 rounded-md px-2 py-1 font-normal text-N600 hover:bg-N900/10 [.is-active_&]:text-primary"
+                    :title="paragraph.title || ''"
+                  >
+                    <span class="min-w-0 flex-1 truncate">{{ paragraph.title || '-' }}</span>
+                  </div>
+                </el-anchor-link>
+              </div>
+            </template>
+          </div>
         </el-anchor>
       </el-scrollbar>
     </template>
+
     <template #default="{ Header, Footer }">
       <component :is="Header">
         <p class="text-N600">{{ paragraphTotal }} 分段</p>
       </component>
       <MkInfiniteScroll ref="infiniteScrollRef" v-model="paragraphs" :load="loadParagraphPage">
-        <div class="space-y-3">
+        <div ref="paragraphCardsRef" class="space-y-3">
           <template v-for="paragraph in paragraphs" :key="paragraph.id">
-            <el-card
-              :id="`paragraph-${paragraph.id}`"
-              shadow="never"
-              class="mk-paragraph-card group relative cursor-pointer overflow-visible!"
-              body-class="overflow-visible!"
-              :class="{ selectable: batchMode, active: batchMode && selectedParagraphIds.includes(paragraph.id) }"
-              @click="handleClickParagraphCard(paragraph)"
-            >
-              <div
+            <div class="paragraph-sort-row group relative">
+              <!-- 拖拽排序分段卡片 -->
+              <el-button
                 v-if="!batchMode"
-                class="sticky top-3 z-10 h-0"
-                :class="{ 'group-hover-visible': openParagraphMenuIds.more !== paragraph.id && openParagraphMenuIds.position !== paragraph.id }"
+                link
+                class="paragraph-card-drag__handle group-hover-visible absolute! top-4 -left-5 z-10 text-N600 h-8!"
+                :disabled="paragraphSortDisabled"
                 @click.stop
               >
-                <el-card class="absolute top-0 right-0" shadow="always" style="--el-card-padding: 4px">
-                  <div class="flex-align-center">
-                    <!-- 启用或禁用当前分段 -->
-                    <el-switch
-                      :model-value="paragraph.is_active"
-                      :disabled="loading"
-                      size="small"
-                      class="ml-1"
-                      :before-change="() => handleToggleParagraph(paragraph)"
-                    />
-                    <el-divider direction="vertical" class="ml-3! mr-2!" />
-                    <MkTooltip content="编辑">
-                      <!-- 编辑当前分段 -->
-                      <el-button text @click="handleOpenParagraphDetail(paragraph, 'edit')">
-                        <MkIcon name="icon_edit_outlined" />
-                      </el-button>
-                    </MkTooltip>
-                    <MkTooltip content="上方插入分段">
-                      <!-- 在当前分段上方插入 -->
-                      <el-button text @click="handleOpenCreateParagraph(paragraph.position)">
-                        <MkIcon name="icon_add_outlined-1" />
-                      </el-button>
-                    </MkTooltip>
-                    <MkDropdown
-                      trigger="click"
-                      placement="bottom-end"
-                      hide-when-empty
-                      persistent
-                      class="ml-1"
-                      @visible-change="handleParagraphMenuVisibleChange(paragraph.id, 'more', $event)"
-                    >
-                      <!-- 展开分段更多操作 -->
-                      <el-button text><MkIcon name="icon_more_outlined" /></el-button>
-                      <template #dropdown>
-                        <MkDropdownMenu>
-                          <!-- 生成当前分段的问题 -->
-                          <GenerateQuestionsAction
-                            label="生成问题"
-                            :api="ParagraphApi"
-                            :knowledge-id="knowledgeId"
-                            :document-id="documentId"
-                            :paragraph-id="paragraph.id"
-                            :disabled="loading"
-                            @refresh="handleGenerateQuestionsSuccess"
-                          />
-                          <!-- 迁移当前分段 -->
-                          <MigrateParagraphAction
-                            :api="ParagraphApi"
-                            :knowledge-id="knowledgeId"
-                            :document-id="documentId"
-                            :paragraph-id="paragraph.id"
-                            :disabled="loading"
-                            @success="handleRemoveParagraphs"
-                          />
-                          <!-- 展开分段位置菜单 -->
-                          <MoveParagraphAction
-                            label="移动位置"
-                            divided
-                            :disabled="loading"
-                            @move="handleMoveParagraph(paragraph, $event)"
-                            @visible-change="handleParagraphMenuVisibleChange(paragraph.id, 'position', $event)"
-                          />
-                          <!-- 删除当前分段 -->
-                          <MkDropdownItem divided :disabled="loading" @click="handleDeleteParagraph(paragraph)">
-                            <template #icon><MkIcon name="icon_delete-trash_outlined" /></template>
-                            删除
-                          </MkDropdownItem>
-                        </MkDropdownMenu>
-                      </template>
-                    </MkDropdown>
-                  </div>
-                </el-card>
-              </div>
-              <h4 class="mb-2 pr-44">{{ paragraph.title || '-' }}</h4>
+                <MkIcon name="icon_drag_outlined" />
+              </el-button>
+              <el-card
+                :id="`paragraph-${paragraph.id}`"
+                shadow="never"
+                class="mk-paragraph-card relative cursor-pointer overflow-visible!"
+                body-class="overflow-visible!"
+                :class="{ selectable: batchMode, active: batchMode && selectedParagraphIds.includes(paragraph.id), disabled: !paragraph.is_active }"
+                @click="handleClickParagraphCard(paragraph)"
+              >
+                <div
+                  v-if="!batchMode"
+                  class="paragraph-card-actions sticky top-3 z-10 h-0"
+                  :class="{ 'group-hover-visible': openParagraphMenuIds.more !== paragraph.id && openParagraphMenuIds.position !== paragraph.id }"
+                  @click.stop
+                >
+                  <el-card class="absolute top-0 right-0" shadow="always" style="--el-card-padding: 4px">
+                    <div class="flex-align-center">
+                      <!-- 启用或禁用当前分段 -->
+                      <el-switch
+                        :model-value="paragraph.is_active"
+                        :disabled="loading || paragraphMoving"
+                        size="small"
+                        class="ml-1"
+                        :before-change="() => handleToggleParagraph(paragraph)"
+                      />
+                      <el-divider direction="vertical" class="ml-3! mr-2!" />
+                      <MkTooltip content="编辑">
+                        <!-- 编辑当前分段 -->
+                        <el-button text @click="handleOpenParagraphDetail(paragraph, 'edit')">
+                          <MkIcon name="icon_edit_outlined" />
+                        </el-button>
+                      </MkTooltip>
+                      <MkTooltip content="上方插入分段">
+                        <!-- 在当前分段上方插入 -->
+                        <el-button text @click="handleOpenCreateParagraph(paragraph.position)">
+                          <MkIcon name="icon_add_outlined-1" />
+                        </el-button>
+                      </MkTooltip>
+                      <MkDropdown
+                        trigger="click"
+                        placement="bottom-end"
+                        hide-when-empty
+                        persistent
+                        class="ml-1"
+                        @visible-change="handleParagraphMenuVisibleChange(paragraph.id, 'more', $event)"
+                      >
+                        <!-- 展开分段更多操作 -->
+                        <el-button text><MkIcon name="icon_more_outlined" /></el-button>
+                        <template #dropdown>
+                          <MkDropdownMenu>
+                            <!-- 生成当前分段的问题 -->
+                            <GenerateQuestionsAction
+                              label="生成问题"
+                              :api="ParagraphApi"
+                              :knowledge-id="knowledgeId"
+                              :document-id="documentId"
+                              :paragraph-id="paragraph.id"
+                              :disabled="loading || paragraphMoving"
+                              @refresh="handleGenerateQuestionsSuccess"
+                            />
+                            <!-- 迁移当前分段 -->
+                            <MigrateParagraphAction
+                              :api="ParagraphApi"
+                              :knowledge-id="knowledgeId"
+                              :document-id="documentId"
+                              :paragraph-id="paragraph.id"
+                              :disabled="loading || paragraphMoving"
+                              @success="handleRemoveParagraphs"
+                            />
+                            <!-- 展开分段位置菜单 -->
+                            <MoveParagraphAction
+                              label="移动位置"
+                              divided
+                              :disabled="loading || paragraphMoving || paragraphPageLoading"
+                              @move="handleMoveParagraph(paragraph, $event)"
+                              @visible-change="handleParagraphMenuVisibleChange(paragraph.id, 'position', $event)"
+                            />
+                            <!-- 删除当前分段 -->
+                            <MkDropdownItem divided :disabled="loading || paragraphMoving" @click="handleDeleteParagraph(paragraph)">
+                              <template #icon><MkIcon name="icon_delete-trash_outlined" /></template>
+                              删除
+                            </MkDropdownItem>
+                          </MkDropdownMenu>
+                        </template>
+                      </MkDropdown>
+                    </div>
+                  </el-card>
+                </div>
+                <h4 class="mb-2 pr-44">{{ paragraph.title || '-' }}</h4>
 
-              <!-- 选择批量操作的分段 -->
-              <el-checkbox
-                v-if="batchMode"
-                class="absolute! top-4 right-4"
-                :model-value="selectedParagraphIds.includes(paragraph.id)"
-                @click.stop
-                @change="(selected: boolean | string | number) => handleSelectBatchParagraph(paragraph.id, Boolean(selected))"
-              />
+                <!-- 选择批量操作的分段 -->
+                <el-checkbox
+                  v-if="batchMode"
+                  class="absolute! top-4 right-4"
+                  :model-value="selectedParagraphIds.includes(paragraph.id)"
+                  @click.stop
+                  @change="(selected: boolean | string | number) => handleSelectBatchParagraph(paragraph.id, Boolean(selected))"
+                />
 
-              <MdPreview :model-value="paragraph.content" />
-              <p class="mt-2 text-sm text-N600">{{ paragraph.content.length }} 字符</p>
-            </el-card>
+                <MdPreview :model-value="paragraph.content" />
+                <p class="mt-2 text-sm text-N600">{{ paragraph.content.length }} 字符</p>
+              </el-card>
+            </div>
           </template>
         </div>
         <template #empty>
@@ -451,7 +609,7 @@ onMounted(() => {
             :knowledge-id="knowledgeId"
             :document-id="documentId"
             :paragraph-ids="selectedParagraphIds"
-            :disabled="loading"
+            :disabled="loading || paragraphMoving"
             @success="handleRemoveParagraphs"
           />
           <!-- 批量生成问题 -->
@@ -460,7 +618,7 @@ onMounted(() => {
             :knowledge-id="knowledgeId"
             :document-id="documentId"
             :paragraph-ids="selectedParagraphIds"
-            :disabled="loading"
+            :disabled="loading || paragraphMoving"
             @refresh="handleGenerateQuestionsSuccess"
           />
           <!-- 批量删除分段 -->
diff --git a/ui/src/workflow-canvas/nodes/condition-node/index.vue b/ui/src/workflow-canvas/nodes/condition-node/index.vue
index ca82b9db008..3cce1d21b3f 100644
--- a/ui/src/workflow-canvas/nodes/condition-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/condition-node/index.vue
@@ -68,7 +68,7 @@ const sortableBranches = computed({
 })
 useSortable(branchListRef, sortableBranches, () => ({
   disabled: sortableBranches.value.length < 2,
-  handle: '.condition-branch-handle',
+  handle: '.paragraphcondition-branch__handlecontent__handle',
   draggable: '> .condition-branch',
 }))
 
@@ -157,7 +157,7 @@ onBeforeUnmount(() => {
       <div ref="branchListRef">
         <div v-for="(branch, branchIndex) in sortableBranches" :key="branch.id" class="condition-branch mb-2 flex-align-center gap-1">
           <div v-branch-resize="branch.id" class="mk-gray-card group/branch min-w-0 flex-1">
-            <div class="condition-branch-handle flex-between min-h-6">
+            <div class="paragraphcondition-branch__handlecontent__handle flex-between min-h-6">
               <div class="flex-align-center">
                 <!-- 拖拽排序分支 -->
                 <el-button v-if="sortableBranches.length > 1" link class="hidden! group-hover/branch:inline-flex!">