From 65c85180c224251db1b5347b9cd240710b5a8407 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=AD=90=E9=BB=98?= <925456043@qq.com>
Date: Fri, 4 Sep 2026 11:33:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E7=9F=A5=E8=AF=86?=
 =?UTF-8?q?=E5=BA=93=E6=96=87=E6=A1=A3=E6=89=B9=E9=87=8F=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E4=B8=8E=E5=88=86=E5=9D=97=E5=86=85=E8=81=94=E7=BC=96=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/src/components/page/PageData.test.ts  |   70 +
 .../app/src/components/page/PageData.vue      |   51 +-
 .../langs/en-US/documentCollection.json       |   21 +-
 .../langs/zh-CN/documentCollection.json       |   21 +-
 .../ChunkDocumentTable.test.ts                |  781 ++++++++
 .../documentCollection/ChunkDocumentTable.vue | 1568 ++++++++++++-----
 .../views/ai/documentCollection/Document.vue  |   51 +-
 .../documentCollection/DocumentTable.test.ts  |  348 ++++
 .../ai/documentCollection/DocumentTable.vue   |  296 +++-
 .../documentCollection/KnowledgeShareView.vue |   34 +-
 .../editor-ui/src/MarkdownLiveEditor.test.ts  |  296 +++-
 .../editor-ui/src/MarkdownLiveEditor.vue      |  339 +++-
 .../@core/ui-kit/editor-ui/src/index.ts       |    4 +
 .../editor-ui/src/markdown-fidelity.test.ts   |    9 +
 .../ui-kit/editor-ui/src/markdown-fidelity.ts |   23 +
 15 files changed, 3419 insertions(+), 493 deletions(-)
 create mode 100644 easyflow-ui-admin/app/src/views/ai/documentCollection/ChunkDocumentTable.test.ts
 create mode 100644 easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentTable.test.ts

diff --git a/easyflow-ui-admin/app/src/components/page/PageData.test.ts b/easyflow-ui-admin/app/src/components/page/PageData.test.ts
index cbeeda0a..89ea65e1 100644
--- a/easyflow-ui-admin/app/src/components/page/PageData.test.ts
+++ b/easyflow-ui-admin/app/src/components/page/PageData.test.ts
@@ -1,5 +1,6 @@
 import { flushPromises, mount } from '@vue/test-utils';
 
+import { ElPagination } from 'element-plus';
 import { describe, expect, it, vi } from 'vitest';
 
 import PageData from './PageData.vue';
@@ -305,4 +306,73 @@ describe('page data recovery', () => {
       params: { pageNumber: 1, pageSize: 10, title: '月报' },
     });
   });
+
+  it('keeps the current page when an unsaved-change guard rejects navigation', async () => {
+    const get = vi.fn().mockResolvedValue({
+      data: { records: [{ id: 'row' }], totalRow: 30 },
+    });
+    const beforePageChange = vi.fn().mockResolvedValue(false);
+    const wrapper = mount(PageData, {
+      global: { directives: { loading: {} } },
+      props: {
+        beforePageChange,
+        pageUrl: '/page',
+        requestClient: { get },
+      },
+    });
+    await flushPromises();
+
+    wrapper.findComponent(ElPagination).vm.$emit('current-change', 2);
+    await flushPromises();
+
+    expect(beforePageChange).toHaveBeenCalledTimes(1);
+    expect((wrapper.vm as any).getPageState().pageNumber).toBe(1);
+    expect(get).toHaveBeenCalledTimes(1);
+  });
+
+  it('removes a persisted row locally without waiting for another page request', async () => {
+    const get = vi.fn().mockResolvedValue({
+      data: { records: [{ id: 'a' }, { id: 'b' }], totalRow: 2 },
+    });
+    const wrapper = mount(PageData, {
+      global: { directives: { loading: {} } },
+      props: { pageUrl: '/page', requestClient: { get } },
+    });
+    await flushPromises();
+
+    expect((wrapper.vm as any).removeRowById('a')).toBe(true);
+    await flushPromises();
+
+    expect((wrapper.vm as any).getPageRows()).toEqual([{ id: 'b' }]);
+    expect(get).toHaveBeenCalledTimes(1);
+  });
+
+  it('silently backfills the current page after deleting from a non-last page', async () => {
+    const initialRows = Array.from({ length: 10 }, (_, index) => ({
+      id: `row-${index + 1}`,
+    }));
+    const backfilledRows = [
+      ...initialRows.slice(1),
+      { id: 'row-11' },
+    ];
+    const get = vi
+      .fn()
+      .mockResolvedValueOnce({
+        data: { records: initialRows, totalRow: 11 },
+      })
+      .mockResolvedValueOnce({
+        data: { records: backfilledRows, totalRow: 10 },
+      });
+    const wrapper = mount(PageData, {
+      global: { directives: { loading: {} } },
+      props: { pageUrl: '/page', requestClient: { get } },
+    });
+    await flushPromises();
+
+    expect((wrapper.vm as any).removeRowById('row-1')).toBe(true);
+    await flushPromises();
+
+    expect(get).toHaveBeenCalledTimes(2);
+    expect((wrapper.vm as any).getPageRows()).toEqual(backfilledRows);
+  });
 });
diff --git a/easyflow-ui-admin/app/src/components/page/PageData.vue b/easyflow-ui-admin/app/src/components/page/PageData.vue
index c8da9ae1..c64de861 100644
--- a/easyflow-ui-admin/app/src/components/page/PageData.vue
+++ b/easyflow-ui-admin/app/src/components/page/PageData.vue
@@ -9,6 +9,7 @@ import { api } from '#/api/request';
 import { getEmptyStateImageUrl } from '#/utils/assets';
 
 interface PageDataProps {
+  beforePageChange?: () => boolean | Promise<boolean>;
   pageUrl: string;
   refreshUrl?: string;
   pageSize?: number;
@@ -44,6 +45,7 @@ interface PageDataLoadEvent {
   lightweight: boolean;
   pageNumber: number;
   recordCount: number;
+  silent: boolean;
 }
 
 interface PageDataLoadErrorEvent extends PageDataLoadEvent {
@@ -51,6 +53,7 @@ interface PageDataLoadErrorEvent extends PageDataLoadEvent {
 }
 
 const props = withDefaults(defineProps<PageDataProps>(), {
+  beforePageChange: undefined,
   pageSize: 10,
   pageSizes: () => [10, 20, 50, 100],
   refreshUrl: undefined,
@@ -113,6 +116,7 @@ const loadPageListOnce = async (request: PageDataRequest) => {
           lightweight: true,
           pageNumber: pageInfo.pageNumber,
           recordCount: pageList.value.length,
+          silent: request.silent,
         });
         return;
       }
@@ -130,6 +134,7 @@ const loadPageListOnce = async (request: PageDataRequest) => {
         lightweight: false,
         pageNumber: pageInfo.pageNumber,
         recordCount: pageList.value.length,
+        silent: request.silent,
       });
     }
   } catch (error) {
@@ -144,6 +149,7 @@ const loadPageListOnce = async (request: PageDataRequest) => {
         lightweight,
         pageNumber: pageInfo.pageNumber,
         recordCount: pageList.value.length,
+        silent: request.silent,
       });
     }
   }
@@ -197,13 +203,21 @@ const reload = (options: PageDataReloadOptions = {}) =>
   requestPageList(Boolean(options.silent), Boolean(options.lightweight));
 
 // 分页事件处理
-const handleSizeChange = (newSize: number) => {
+const canChangePage = async () => (await props.beforePageChange?.()) !== false;
+
+const handleSizeChange = async (newSize: number) => {
+  if (!(await canChangePage())) {
+    return;
+  }
   pageInfo.pageSize = newSize;
   pageInfo.pageNumber = 1; // 重置到第一页
   emitPageState();
 };
 
-const handleCurrentChange = (newPage: number) => {
+const handleCurrentChange = async (newPage: number) => {
+  if (!(await canChangePage())) {
+    return;
+  }
   pageInfo.pageNumber = newPage;
   emitPageState();
 };
@@ -213,6 +227,8 @@ const getPageState = (): PageDataState => ({
   pageSize: pageInfo.pageSize,
 });
 
+const getPageRows = () => pageList.value;
+
 function normalizeQueryParams(value: Record<string, any> = {}) {
   return Object.fromEntries(
     Object.entries(value).filter(([, item]) => item !== undefined),
@@ -254,6 +270,31 @@ const patchRowById = (
   return true;
 };
 
+const removeRowById = (id: number | string): boolean => {
+  const rowIndex = pageList.value.findIndex(
+    (item) => String(item?.id ?? '') === String(id ?? ''),
+  );
+  if (rowIndex === -1) return false;
+  const nextPageList = [...pageList.value];
+  nextPageList.splice(rowIndex, 1);
+  pageList.value = nextPageList;
+  pageInfo.total = Math.max(0, pageInfo.total - 1);
+  if (pageList.value.length === 0 && pageInfo.pageNumber > 1) {
+    pageInfo.pageNumber--;
+    emitPageState();
+  } else {
+    const pageStart = (pageInfo.pageNumber - 1) * pageInfo.pageSize;
+    const expectedRowCount = Math.min(
+      pageInfo.pageSize,
+      Math.max(0, pageInfo.total - pageStart),
+    );
+    if (pageList.value.length < expectedRowCount) {
+      void reload({ silent: true });
+    }
+  }
+  return true;
+};
+
 // 暴露给父组件的方法 (替代 useImperativeHandle)
 const setQuery = (newQueryParams: Record<string, any>) => {
   pageInfo.pageNumber = 1;
@@ -285,9 +326,11 @@ const restoreState = (state: PageDataRestoreState) => {
 
 // 暴露方法给父组件
 defineExpose({
+  getPageRows,
   getPageState,
   reload,
   patchRowById,
+  removeRowById,
   restoreState,
   setQuery,
 });
@@ -319,8 +362,8 @@ onMounted(() => {
         class="page-data-container__pagination mx-auto mt-6 w-fit"
       >
         <ElPagination
-          v-model:current-page="pageInfo.pageNumber"
-          v-model:page-size="pageInfo.pageSize"
+          :current-page="pageInfo.pageNumber"
+          :page-size="pageInfo.pageSize"
           :total="pageInfo.total"
           :page-sizes="pageSizes"
           layout="total, sizes, prev, pager, next, jumper"
diff --git a/easyflow-ui-admin/app/src/locales/langs/en-US/documentCollection.json b/easyflow-ui-admin/app/src/locales/langs/en-US/documentCollection.json
index 6f2f0498..9bc349e3 100644
--- a/easyflow-ui-admin/app/src/locales/langs/en-US/documentCollection.json
+++ b/easyflow-ui-admin/app/src/locales/langs/en-US/documentCollection.json
@@ -269,5 +269,24 @@
   "dimensionOfVectorModelTips": "After successful vector data, it is not allowed to modify the dimensions of the vector model",
   "dimensionOfVectorModel": "Dimension of vector model",
   "managePermissionHint": "Only the creator or super admin can modify this knowledge base",
-  "processingDeleteBlocked": "Documents in progress cannot be deleted"
+  "processingDeleteBlocked": "Documents in progress cannot be deleted",
+  "selectedCount": "{count} selected",
+  "batchDelete": "Delete",
+  "cancelSelection": "Clear selection",
+  "batchDeleteConfirm": "Delete the selected {count} documents? In-progress items are excluded. This cannot be undone.",
+  "batchDeleteSuccess": "Deleted {count} documents",
+  "batchDeletePartial": "Deletion finished: {success} succeeded, {failed} failed",
+  "chunkUnsavedTitle": "Leave editing",
+  "chunkUnsavedConfirm": "Discard unsaved changes and leave?",
+  "continueEditing": "Keep editing",
+  "discardChanges": "Discard changes",
+  "chunkSourceFallback": "Switched to source editing",
+  "chunkSyncPending": "Updating search index",
+  "chunkSyncSucceeded": "Search index updated",
+  "chunkSyncFailed": "Index sync failed. Click to retry",
+  "chunkSyncRetryFailed": "Failed to retry index sync",
+  "chunkLiveMode": "Live",
+  "chunkSourceMode": "Source",
+  "deleteChunk": "Delete chunk",
+  "emptyChunkDeleteConfirm": "This chunk is empty. Saving will delete it permanently."
 }
diff --git a/easyflow-ui-admin/app/src/locales/langs/zh-CN/documentCollection.json b/easyflow-ui-admin/app/src/locales/langs/zh-CN/documentCollection.json
index c9c88e28..7d9b2d97 100644
--- a/easyflow-ui-admin/app/src/locales/langs/zh-CN/documentCollection.json
+++ b/easyflow-ui-admin/app/src/locales/langs/zh-CN/documentCollection.json
@@ -269,5 +269,24 @@
   "dimensionOfVectorModelTips": "成功向量数据之后不允许修改向量模型维度",
   "dimensionOfVectorModel": "向量模型维度",
   "managePermissionHint": "仅创建者或超级管理员可修改当前知识库",
-  "processingDeleteBlocked": "文档处理中，暂不允许删除"
+  "processingDeleteBlocked": "文档处理中，暂不允许删除",
+  "selectedCount": "已选 {count} 项",
+  "batchDelete": "删除",
+  "cancelSelection": "取消选择",
+  "batchDeleteConfirm": "确认删除选中的 {count} 个文档？处理中项不会删除，删除后无法恢复。",
+  "batchDeleteSuccess": "已删除 {count} 个文档",
+  "batchDeletePartial": "删除完成：成功 {success} 个，失败 {failed} 个",
+  "chunkUnsavedTitle": "离开编辑",
+  "chunkUnsavedConfirm": "当前有未保存修改，确认离开？",
+  "continueEditing": "继续编辑",
+  "discardChanges": "放弃修改",
+  "chunkSourceFallback": "已切换到源码编辑",
+  "chunkSyncPending": "正在更新检索索引",
+  "chunkSyncSucceeded": "检索索引已更新",
+  "chunkSyncFailed": "索引同步失败，点击重试",
+  "chunkSyncRetryFailed": "索引同步重试失败",
+  "chunkLiveMode": "实时",
+  "chunkSourceMode": "源码",
+  "deleteChunk": "删除分块",
+  "emptyChunkDeleteConfirm": "分块内容为空，保存后将删除该分块。删除后无法恢复。"
 }
diff --git a/easyflow-ui-admin/app/src/views/ai/documentCollection/ChunkDocumentTable.test.ts b/easyflow-ui-admin/app/src/views/ai/documentCollection/ChunkDocumentTable.test.ts
new file mode 100644
index 00000000..f2d5310e
--- /dev/null
+++ b/easyflow-ui-admin/app/src/views/ai/documentCollection/ChunkDocumentTable.test.ts
@@ -0,0 +1,781 @@
+import { flushPromises, mount } from '@vue/test-utils';
+
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import PageData from '#/components/page/PageData.vue';
+
+import ChunkDocumentTable from './ChunkDocumentTable.vue';
+
+const tableState = vi.hoisted(() => ({ rows: [] as any[] }));
+const liveEditorState = vi.hoisted(() => ({
+  flushedMarkdown: undefined as string | undefined,
+  focus: vi.fn(),
+}));
+const mountedWrappers: Array<ReturnType<typeof mount>> = [];
+
+vi.mock('element-plus', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('element-plus')>();
+  const { defineComponent, h } = await import('vue');
+  const ElTable = defineComponent({
+    name: 'ElTable',
+    props: ['data'],
+    setup(props, { slots }) {
+      return () => {
+        tableState.rows = props.data || [];
+        return h('div', { class: 'table-stub' }, slots.default?.());
+      };
+    },
+  });
+  const ElTableColumn = defineComponent({
+    name: 'ElTableColumn',
+    setup(_props, { slots }) {
+      return () =>
+        h(
+          'div',
+          { class: 'table-column-stub' },
+          tableState.rows.map((row) => slots.default?.({ row })),
+        );
+    },
+  });
+  return { ...actual, ElTable, ElTableColumn };
+});
+
+vi.mock('#/api/request', () => ({ api: {} }));
+
+vi.mock('@easyflow/locales', () => ({
+  $t: (key: string) => {
+    const messages: Record<string, string> = {
+      'documentCollection.continueEditing': '继续编辑',
+      'documentCollection.deleteChunk': '删除分块',
+      'documentCollection.emptyChunkDeleteConfirm':
+        '分块内容为空，保存后将删除该分块。删除后无法恢复。',
+      'documentCollection.chunkSyncPending': '正在更新检索索引',
+      'documentCollection.chunkSyncSucceeded': '检索索引已更新',
+      'documentCollection.chunkSyncFailed': '索引同步失败，点击重试',
+      'documentCollection.chunkSyncRetryFailed': '索引同步重试失败',
+    };
+    return messages[key] || key;
+  },
+}));
+
+vi.mock('vue-element-plus-x/es/XMarkdown/index.js', () => ({
+  default: {
+    props: ['markdown'],
+    template: '<div class="markdown-output">{{ markdown }}</div>',
+  },
+}));
+
+vi.mock('@easyflow-core/editor-ui', () => ({
+  containsRawHtml: (markdown: string) => /<\/?[a-z][^>]*>/i.test(markdown),
+  EMPTY_IMAGE_DATA_URL: 'data:image/gif;base64,empty',
+  hasEquivalentMarkdownSemantics: (source: string, normalized: string) =>
+    source.trim() === normalized.trim(),
+  MAX_LIVE_MARKDOWN_CHARACTERS: 300_000,
+  MarkdownSourceEditor: {
+    emits: ['save', 'update:modelValue'],
+    methods: { focus: () => undefined },
+    name: 'MarkdownSourceEditor',
+    props: ['highlight', 'modelValue', 'readonly'],
+    template:
+      '<textarea class="editor-stub" :readonly="readonly" :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />',
+  },
+  resolveSafeExternalMarkdownImageUrl: (url: string) =>
+    url.startsWith('https:') ? url : 'data:image/gif;base64,empty',
+}));
+
+vi.mock('@easyflow-core/editor-ui/markdown-live-editor', () => ({
+  default: {
+    emits: ['error', 'fidelityLoss', 'save', 'update:modelValue'],
+    methods: {
+      flushMarkdown(this: { modelValue?: string }): string {
+        return liveEditorState.flushedMarkdown ?? this.modelValue ?? '';
+      },
+      focus() {
+        liveEditorState.focus();
+      },
+    },
+    mounted(this: { autofocus?: boolean; focus: () => void }) {
+      if (this.autofocus) this.focus();
+    },
+    name: 'MarkdownLiveEditor',
+    props: {
+      autofocus: Boolean,
+      modelValue: String,
+      readonly: Boolean,
+      resolveImageUrl: Function,
+      variant: String,
+    },
+    template:
+      '<textarea class="editor-stub" :readonly="readonly" :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />',
+  },
+}));
+
+const row = {
+  content: '检索正文',
+  documentCollectionId: '11',
+  documentId: '22',
+  id: '33',
+  indexSyncStatus: 'SYNCED',
+  indexSyncVersion: 0,
+  options: {
+    keep: 'value',
+    imageRefs: ['http://localhost:9000/trusted.png'],
+    renderMarkdown: '# 原内容',
+    sourceFileExt: 'xlsx',
+  },
+  sorting: 1,
+};
+
+function mountTable(
+  post = vi.fn(),
+  pageRows = [row],
+  attachTo?: Element,
+  componentProps: Record<string, unknown> = {},
+) {
+  liveEditorState.flushedMarkdown = undefined;
+  liveEditorState.focus.mockClear();
+  const get = vi.fn().mockResolvedValue({
+    data: { records: pageRows, totalRow: pageRows.length },
+  });
+  const wrapper = mount(ChunkDocumentTable, {
+    attachTo,
+    global: { directives: { loading: {} } },
+    props: {
+      documentId: '22',
+      requestClient: { get, post },
+      ...componentProps,
+    },
+  });
+  mountedWrappers.push(wrapper);
+  return {
+    get,
+    post,
+    wrapper,
+  };
+}
+
+function getButton(wrapper: ReturnType<typeof mount>, label: string) {
+  const button = wrapper
+    .findAll('button')
+    .find((candidate) => candidate.text().includes(label));
+  if (!button) {
+    throw new Error(`未找到按钮: ${label}`);
+  }
+  return button;
+}
+
+afterEach(() => {
+  mountedWrappers.splice(0).forEach((wrapper) => wrapper.unmount());
+  vi.useRealTimers();
+  vi.restoreAllMocks();
+});
+
+describe('chunkDocumentTable', () => {
+  it('在分块内只挂载一个实时编辑器并原位保存', async () => {
+    const post = vi.fn().mockResolvedValue({
+      data: {
+        content: '新内容',
+        options: { keep: 'value', renderMarkdown: '# 新内容' },
+      },
+      errorCode: 0,
+    });
+    const { wrapper } = mountTable(post);
+    await flushPromises();
+
+    await getButton(wrapper, 'button.edit').trigger('click');
+    await flushPromises();
+
+    expect(wrapper.findAll('.editor-stub')).toHaveLength(1);
+    expect(wrapper.get('.inline-editor').classes()).toContain('is-live-mode');
+    expect(
+      wrapper.findComponent({ name: 'MarkdownLiveEditor' }).props(),
+    ).toMatchObject({ autofocus: true, variant: 'inline' });
+    expect(liveEditorState.focus).toHaveBeenCalledOnce();
+    await wrapper.get('.editor-stub').setValue('# 新内容');
+    await getButton(wrapper, 'button.save').trigger('click');
+    await flushPromises();
+
+    expect(post).toHaveBeenCalledWith('/api/v1/documentChunk/update', {
+      content: '# 新内容',
+      id: '33',
+    });
+    expect(wrapper.find('.inline-editor').exists()).toBe(false);
+    expect(wrapper.text()).toContain('# 新内容');
+  });
+
+  it('保存前读取实时编辑器最新文档，避免防抖期间丢失格式操作', async () => {
+    const post = vi.fn().mockResolvedValue({
+      data: {
+        content: '**工具栏更新**',
+        options: { renderMarkdown: '**工具栏更新**' },
+      },
+      errorCode: 0,
+    });
+    const { wrapper } = mountTable(post);
+    await flushPromises();
+    await getButton(wrapper, 'button.edit').trigger('click');
+    await flushPromises();
+    liveEditorState.flushedMarkdown = '**工具栏更新**';
+
+    await getButton(wrapper, 'button.save').trigger('click');
+    await flushPromises();
+
+    expect(post).toHaveBeenCalledWith('/api/v1/documentChunk/update', {
+      content: '**工具栏更新**',
+      id: '33',
+    });
+  });
+
+  it('快速离开前同步读取最新草稿并触发放弃确认', async () => {
+    const confirm = vi
+      .spyOn(ElMessageBox, 'confirm')
+      .mockRejectedValue('cancel');
+    const { wrapper } = mountTable();
+    await flushPromises();
+    await getButton(wrapper, 'button.edit').trigger('click');
+    await flushPromises();
+    liveEditorState.flushedMarkdown = '尚未经过防抖回调的输入';
+
+    await getButton(wrapper, 'button.cancel').trigger('click');
+    await flushPromises();
+
+    expect(confirm).toHaveBeenCalledOnce();
+    expect(wrapper.find('.inline-editor').exists()).toBe(true);
+    expect(
+      (wrapper.get('.editor-stub').element as HTMLTextAreaElement).value,
+    ).toBe('尚未经过防抖回调的输入');
+  });
+
+  it('撤销回原始语义后可直接退出编辑', async () => {
+    const confirm = vi.spyOn(ElMessageBox, 'confirm');
+    const { wrapper } = mountTable();
+    await flushPromises();
+    await getButton(wrapper, 'button.edit').trigger('click');
+    await flushPromises();
+    liveEditorState.flushedMarkdown = '# 原内容\n';
+
+    await getButton(wrapper, 'button.cancel').trigger('click');
+    await flushPromises();
+
+    expect(confirm).not.toHaveBeenCalled();
+    expect(wrapper.find('.inline-editor').exists()).toBe(false);
+  });
+
+  it('切换源码模式前同步实时编辑器的最后输入', async () => {
+    const { wrapper } = mountTable();
+    await flushPromises();
+    await getButton(wrapper, 'button.edit').trigger('click');
+    await flushPromises();
+    liveEditorState.flushedMarkdown = '防抖窗口内的最后输入';
+
+    await getButton(wrapper, 'documentCollection.chunkSourceMode').trigger(
+      'click',
+    );
+    await flushPromises();
+
+    expect(
+      wrapper
+        .findComponent({ name: 'MarkdownSourceEditor' })
+        .props('modelValue'),
+    ).toBe('防抖窗口内的最后输入');
+  });
+
+  it('源码中的等价格式改动切回实时后仍会保存', async () => {
+    const post = vi.fn().mockResolvedValue({
+      data: {
+        content: '# 原内容\n',
+        options: { renderMarkdown: '# 原内容\n' },
+      },
+      errorCode: 0,
+    });
+    const { wrapper } = mountTable(post);
+    await flushPromises();
+    await getButton(wrapper, 'button.edit').trigger('click');
+    await flushPromises();
+    await getButton(wrapper, 'documentCollection.chunkSourceMode').trigger(
+      'click',
+    );
+    await flushPromises();
+    await wrapper.get('.editor-stub').setValue('# 原内容\n');
+
+    await getButton(wrapper, 'documentCollection.chunkLiveMode').trigger(
+      'click',
+    );
+    await flushPromises();
+    await getButton(wrapper, 'button.save').trigger('click');
+    await flushPromises();
+
+    expect(post).toHaveBeenCalledWith('/api/v1/documentChunk/update', {
+      content: '# 原内容\n',
+      id: '33',
+    });
+  });
+
+  it('关闭页面前同步读取最新草稿并阻止离开', async () => {
+    const { wrapper } = mountTable();
+    await flushPromises();
+    await getButton(wrapper, 'button.edit').trigger('click');
+    await flushPromises();
+    liveEditorState.flushedMarkdown = '尚未经过防抖回调的输入';
+    const event = new Event('beforeunload', { cancelable: true });
+
+    const allowed = window.dispatchEvent(event);
+    await flushPromises();
+
+    expect(allowed).toBe(false);
+    expect(event.defaultPrevented).toBe(true);
+    expect(
+      (wrapper.get('.editor-stub').element as HTMLTextAreaElement).value,
+    ).toBe('尚未经过防抖回调的输入');
+  });
+
+  it('普通文档也在原表格行内使用轻量实时编辑器', async () => {
+    const pdfRow = {
+      ...row,
+      options: { ...row.options, sourceFileExt: 'pdf' },
+    };
+    const { wrapper } = mountTable(vi.fn(), [pdfRow]);
+    await flushPromises();
+
+    expect(wrapper.find('.chunk-data-table').exists()).toBe(true);
+    await getButton(wrapper, 'button.edit').trigger('click');
+    await flushPromises();
+
+    expect(wrapper.findAll('.editor-stub')).toHaveLength(1);
+    expect(
+      wrapper.findComponent({ name: 'MarkdownLiveEditor' }).props('variant'),
+    ).toBe('inline');
+  });
+
+  it('原始 HTML 分块直接使用源码模式，避免伪装成实时渲染', async () => {
+    const htmlRow = {
+      ...row,
+      options: {
+        ...row.options,
+        renderMarkdown: '<table><tr><td>内容</td></tr></table>',
+        sourceFileExt: 'pdf',
+      },
+    };
+    const { wrapper } = mountTable(vi.fn(), [htmlRow]);
+    await flushPromises();
+
+    await getButton(wrapper, 'button.edit').trigger('click');
+    await flushPromises();
+
+    expect(wrapper.findComponent({ name: 'MarkdownLiveEditor' }).exists()).toBe(
+      false,
+    );
+    expect(
+      wrapper.findComponent({ name: 'MarkdownSourceEditor' }).exists(),
+    ).toBe(true);
+    expect(wrapper.get('.inline-editor').classes()).toContain('is-source-mode');
+  });
+
+  it('空内容保存只确认一次并直接删除分块', async () => {
+    const post = vi.fn().mockResolvedValue({ data: true, errorCode: 0 });
+    const confirm = vi
+      .spyOn(ElMessageBox, 'confirm')
+      .mockResolvedValue('confirm' as never);
+    const { wrapper } = mountTable(post);
+    await flushPromises();
+
+    await getButton(wrapper, 'button.edit').trigger('click');
+    await flushPromises();
+    await wrapper.get('.editor-stub').setValue(' \n ');
+    await getButton(wrapper, 'button.save').trigger('click');
+    await flushPromises();
+
+    expect(confirm).toHaveBeenCalledTimes(1);
+    expect(confirm).toHaveBeenCalledWith(
+      '分块内容为空，保存后将删除该分块。删除后无法恢复。',
+      '删除分块',
+      expect.objectContaining({
+        cancelButtonText: '继续编辑',
+        confirmButtonText: '删除分块',
+      }),
+    );
+    expect(post).toHaveBeenCalledTimes(1);
+    expect(post).toHaveBeenCalledWith('/api/v1/documentChunk/removeChunk', {
+      id: '33',
+    });
+    expect(wrapper.find('[data-chunk-id="33"]').exists()).toBe(false);
+  });
+
+  it('空内容删除确认期间阻止重复确认和重复请求', async () => {
+    let resolveConfirm!: (value: unknown) => void;
+    const confirm = vi.spyOn(ElMessageBox, 'confirm').mockReturnValue(
+      new Promise((resolve) => {
+        resolveConfirm = resolve;
+      }) as never,
+    );
+    const post = vi.fn().mockResolvedValue({ data: true, errorCode: 0 });
+    const { wrapper } = mountTable(post);
+    await flushPromises();
+
+    await getButton(wrapper, 'button.edit').trigger('click');
+    await flushPromises();
+    await wrapper.get('.editor-stub').setValue('   ');
+    const saveButton = getButton(wrapper, 'button.save');
+    await saveButton.trigger('click');
+    await saveButton.trigger('click');
+
+    expect(confirm).toHaveBeenCalledTimes(1);
+    expect(post).not.toHaveBeenCalled();
+    expect(getButton(wrapper, 'button.save').attributes()).toHaveProperty(
+      'disabled',
+    );
+
+    resolveConfirm('confirm');
+    await flushPromises();
+    expect(post).toHaveBeenCalledTimes(1);
+  });
+
+  it('取消空内容删除后保留草稿并把焦点还给编辑器', async () => {
+    vi.spyOn(ElMessageBox, 'confirm').mockRejectedValue('cancel');
+    const { wrapper } = mountTable(vi.fn(), [row], document.body);
+    await flushPromises();
+
+    await getButton(wrapper, 'button.edit').trigger('click');
+    await flushPromises();
+    await wrapper.get('.editor-stub').setValue('  ');
+    await getButton(wrapper, 'button.save').trigger('click');
+    await flushPromises();
+
+    const editor = wrapper.get('.editor-stub');
+    expect((editor.element as HTMLTextAreaElement).value).toBe('  ');
+    expect(document.activeElement).toBe(editor.element);
+    wrapper.unmount();
+  });
+
+  it('保存失败时保留当前草稿和编辑状态', async () => {
+    const post = vi.fn().mockResolvedValue({
+      errorCode: 1,
+      message: '保存失败',
+    });
+    const { wrapper } = mountTable(post);
+    await flushPromises();
+
+    await getButton(wrapper, 'button.edit').trigger('click');
+    await flushPromises();
+    await wrapper.get('.editor-stub').setValue('未保存草稿');
+    await getButton(wrapper, 'button.save').trigger('click');
+    await flushPromises();
+
+    expect(wrapper.find('.inline-editor').exists()).toBe(true);
+    expect(
+      (wrapper.get('.editor-stub').element as HTMLTextAreaElement).value,
+    ).toBe('未保存草稿');
+  });
+
+  it('保存后立即回到阅读态并仅在固定状态位展示同步中', async () => {
+    const successMessage = vi.spyOn(ElMessage, 'success');
+    const post = vi.fn().mockResolvedValue({
+      data: {
+        content: '新正文',
+        indexSyncStatus: 'PENDING',
+        indexSyncVersion: 1,
+        options: { renderMarkdown: '新正文' },
+      },
+      errorCode: 0,
+    });
+    const { wrapper } = mountTable(post);
+    await flushPromises();
+    await getButton(wrapper, 'button.edit').trigger('click');
+    await flushPromises();
+    await wrapper.get('.editor-stub').setValue('新正文');
+
+    expect(getButton(wrapper, 'button.cancel').classes()).toContain(
+      'el-button--small',
+    );
+    expect(getButton(wrapper, 'button.save').classes()).toContain(
+      'el-button--small',
+    );
+
+    await getButton(wrapper, 'button.save').trigger('click');
+    await flushPromises();
+
+    expect(wrapper.find('.inline-editor').exists()).toBe(false);
+    expect(wrapper.find('.el-loading-mask').exists()).toBe(false);
+    expect(wrapper.get('.chunk-sync-status').attributes('aria-live')).toBe(
+      'polite',
+    );
+    expect(wrapper.text()).toContain('新正文');
+    expect(successMessage).not.toHaveBeenCalled();
+  });
+
+  it('同步失败时保留原位重试入口并按当前版本重试', async () => {
+    const failedRow = {
+      ...row,
+      indexSyncStatus: 'FAILED',
+      indexSyncVersion: 4,
+    };
+    const post = vi.fn().mockResolvedValue({
+      data: {
+        ...failedRow,
+        indexSyncStatus: 'PENDING',
+      },
+      errorCode: 0,
+    });
+    const { wrapper } = mountTable(post, [failedRow]);
+    await flushPromises();
+
+    await wrapper
+      .get('button[aria-label="索引同步失败，点击重试"]')
+      .trigger('click');
+    await flushPromises();
+
+    expect(post).toHaveBeenCalledWith('/api/v1/documentChunk/retrySync', {
+      id: '33',
+      indexSyncVersion: 4,
+    });
+    expect(wrapper.find('.chunk-sync-status__pending').exists()).toBe(true);
+  });
+
+  it('只读入口不展示索引同步重试操作', async () => {
+    const failedRow = {
+      ...row,
+      indexSyncStatus: 'FAILED',
+      indexSyncVersion: 4,
+    };
+    const { wrapper } = mountTable(vi.fn(), [failedRow], undefined, {
+      manageable: false,
+    });
+    await flushPromises();
+
+    expect(
+      wrapper.find('button[aria-label="索引同步失败，点击重试"]').exists(),
+    ).toBe(false);
+  });
+
+  it('忽略页面刷新后返回的旧轮询状态', async () => {
+    vi.useFakeTimers();
+    let resolvePoll!: (value: unknown) => void;
+    const post = vi.fn().mockReturnValue(
+      new Promise((resolve) => {
+        resolvePoll = resolve;
+      }),
+    );
+    const pendingRow = {
+      ...row,
+      indexSyncStatus: 'PENDING',
+      indexSyncVersion: 7,
+    };
+    const { wrapper } = mountTable(post, [pendingRow]);
+    await flushPromises();
+    await vi.advanceTimersByTimeAsync(2000);
+    const pageData = wrapper.findComponent(PageData);
+    (pageData.vm as any).patchRowById('33', { indexSyncStatus: 'SYNCED' });
+    pageData.vm.$emit('loadSuccess', {});
+    await flushPromises();
+
+    resolvePoll({
+      data: [{ id: '33', indexSyncStatus: 'PENDING', indexSyncVersion: 7 }],
+      errorCode: 0,
+    });
+    await flushPromises();
+
+    expect((pageData.vm as any).getPageRows()[0].indexSyncStatus).toBe(
+      'SYNCED',
+    );
+  });
+
+  it('忽略新版本保存后返回的旧版本重试响应', async () => {
+    let resolveRetry!: (value: unknown) => void;
+    const post = vi.fn().mockReturnValue(
+      new Promise((resolve) => {
+        resolveRetry = resolve;
+      }),
+    );
+    const failedRow = {
+      ...row,
+      indexSyncStatus: 'FAILED',
+      indexSyncVersion: 4,
+    };
+    const { wrapper } = mountTable(post, [failedRow]);
+    await flushPromises();
+    await wrapper
+      .get('button[aria-label="索引同步失败，点击重试"]')
+      .trigger('click');
+    const pageData = wrapper.findComponent(PageData);
+    (pageData.vm as any).patchRowById('33', {
+      indexSyncStatus: 'PENDING',
+      indexSyncVersion: 5,
+    });
+
+    resolveRetry({
+      data: { ...failedRow, indexSyncStatus: 'PENDING' },
+      errorCode: 0,
+    });
+    await flushPromises();
+
+    expect((pageData.vm as any).getPageRows()[0].indexSyncVersion).toBe(5);
+  });
+
+  it('仅轮询待同步行并在完成后停止', async () => {
+    vi.useFakeTimers();
+    const pendingRow = {
+      ...row,
+      indexSyncStatus: 'PENDING',
+      indexSyncVersion: 7,
+    };
+    const post = vi.fn().mockResolvedValue({
+      data: [
+        {
+          id: '33',
+          indexSyncStatus: 'SYNCED',
+          indexSyncVersion: 7,
+        },
+      ],
+      errorCode: 0,
+    });
+    const { wrapper } = mountTable(post, [pendingRow]);
+    await flushPromises();
+
+    await vi.advanceTimersByTimeAsync(2000);
+    await flushPromises();
+
+    expect(post).toHaveBeenCalledWith('/api/v1/documentChunk/syncStatus', {
+      documentId: '22',
+      ids: ['33'],
+    });
+    expect(wrapper.find('.chunk-sync-status__pending').exists()).toBe(false);
+    expect(
+      wrapper.get('.chunk-sync-status__success').attributes('aria-label'),
+    ).toBe('检索索引已更新');
+    expect(vi.getTimerCount()).toBe(1);
+
+    await vi.advanceTimersByTimeAsync(2200);
+    await flushPromises();
+
+    expect(wrapper.find('.chunk-sync-status__success').exists()).toBe(false);
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it('实时编辑器保真失败时使用同一草稿切换源码模式', async () => {
+    const { wrapper } = mountTable();
+    await flushPromises();
+
+    await getButton(wrapper, 'button.edit').trigger('click');
+    await flushPromises();
+    await wrapper.get('.editor-stub').setValue('保留的草稿');
+    wrapper
+      .findComponent({ name: 'MarkdownLiveEditor' })
+      .vm.$emit('fidelityLoss');
+    await flushPromises();
+
+    expect(
+      wrapper.findComponent({ name: 'MarkdownSourceEditor' }).exists(),
+    ).toBe(true);
+    expect(
+      wrapper
+        .findComponent({ name: 'MarkdownSourceEditor' })
+        .props('highlight'),
+    ).toBe(false);
+    expect(wrapper.get('.inline-editor').classes()).toContain('is-source-mode');
+    expect(
+      (wrapper.get('.editor-stub').element as HTMLTextAreaElement).value,
+    ).toBe('保留的草稿');
+  });
+
+  it('保存期间锁定编辑器和模式切换', async () => {
+    let resolveSave!: (value: unknown) => void;
+    const post = vi.fn().mockReturnValue(
+      new Promise((resolve) => {
+        resolveSave = resolve;
+      }),
+    );
+    const { wrapper } = mountTable(post);
+    await flushPromises();
+    await getButton(wrapper, 'button.edit').trigger('click');
+    await flushPromises();
+    await wrapper.get('.editor-stub').setValue('保存中的草稿');
+
+    await getButton(wrapper, 'button.save').trigger('click');
+    expect(
+      wrapper.findComponent({ name: 'MarkdownLiveEditor' }).props('readonly'),
+    ).toBe(true);
+    expect(
+      getButton(wrapper, 'documentCollection.chunkLiveMode').attributes(),
+    ).toHaveProperty('disabled');
+
+    resolveSave({
+      data: {
+        content: '保存中的草稿',
+        options: { renderMarkdown: '保存中的草稿' },
+      },
+      errorCode: 0,
+    });
+    await flushPromises();
+  });
+
+  it('只解析后端登记的本地图片引用', async () => {
+    const { wrapper } = mountTable();
+    await flushPromises();
+    await getButton(wrapper, 'button.edit').trigger('click');
+    await flushPromises();
+
+    const resolver = wrapper
+      .findComponent({ name: 'MarkdownLiveEditor' })
+      .props('resolveImageUrl') as (url: string) => string;
+    expect(resolver('http://localhost:9000/trusted.png')).toBe(
+      'http://localhost:9000/trusted.png',
+    );
+    expect(resolver('http://localhost:9000/untrusted.png')).toBe(
+      'data:image/gif;base64,empty',
+    );
+    expect(resolver('https://cdn.example.com/image.png')).toBe(
+      'https://cdn.example.com/image.png',
+    );
+  });
+
+  it('编辑一个分块时禁用其他分块删除并保留草稿', async () => {
+    const secondRow = {
+      ...row,
+      id: '44',
+      options: { ...row.options, renderMarkdown: '# 第二块' },
+      sorting: 2,
+    };
+    const post = vi.fn();
+    const { wrapper } = mountTable(post, [row, secondRow]);
+    await flushPromises();
+
+    await getButton(wrapper, 'button.edit').trigger('click');
+    await flushPromises();
+    await wrapper.get('.editor-stub').setValue('A 的草稿');
+    const deleteButtons = wrapper
+      .findAll('button')
+      .filter((button) => button.text().includes('button.delete'));
+    expect(deleteButtons.at(-1)?.attributes()).toHaveProperty('disabled');
+    await deleteButtons.at(-1)?.trigger('click');
+    await flushPromises();
+
+    expect(post).not.toHaveBeenCalled();
+    expect(
+      (wrapper.get('.editor-stub').element as HTMLTextAreaElement).value,
+    ).toBe('A 的草稿');
+  });
+
+  it('空内容删除失败时保留空草稿和编辑状态', async () => {
+    const post = vi.fn().mockResolvedValue({
+      data: false,
+      errorCode: 1,
+      message: '删除失败',
+    });
+    vi.spyOn(ElMessageBox, 'confirm').mockResolvedValue('confirm' as never);
+    const { wrapper } = mountTable(post);
+    await flushPromises();
+
+    await getButton(wrapper, 'button.edit').trigger('click');
+    await flushPromises();
+    await wrapper.get('.editor-stub').setValue('   ');
+    await getButton(wrapper, 'button.save').trigger('click');
+    await flushPromises();
+
+    expect(post).toHaveBeenCalledTimes(1);
+    expect(wrapper.find('.inline-editor').exists()).toBe(true);
+    expect(
+      (wrapper.get('.editor-stub').element as HTMLTextAreaElement).value,
+    ).toBe('   ');
+  });
+});
diff --git a/easyflow-ui-admin/app/src/views/ai/documentCollection/ChunkDocumentTable.vue b/easyflow-ui-admin/app/src/views/ai/documentCollection/ChunkDocumentTable.vue
index 6362c7c5..bb26f7c0 100644
--- a/easyflow-ui-admin/app/src/views/ai/documentCollection/ChunkDocumentTable.vue
+++ b/easyflow-ui-admin/app/src/views/ai/documentCollection/ChunkDocumentTable.vue
@@ -1,24 +1,42 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import type { ComponentPublicInstance } from 'vue';
+
+import {
+  computed,
+  defineAsyncComponent,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+} from 'vue';
 import ElXMarkdown from 'vue-element-plus-x/es/XMarkdown/index.js';
 
-import { EasyFlowFormModal } from '@easyflow/common-ui';
 import { $t } from '@easyflow/locales';
 
-import { Delete, EditPen, MoreFilled } from '@element-plus/icons-vue';
+import {
+  containsRawHtml,
+  EMPTY_IMAGE_DATA_URL,
+  hasEquivalentMarkdownSemantics,
+  MarkdownSourceEditor,
+  MAX_LIVE_MARKDOWN_CHARACTERS,
+  resolveSafeExternalMarkdownImageUrl,
+} from '@easyflow-core/editor-ui';
+
+import {
+  Check,
+  Delete,
+  EditPen,
+  Loading,
+  RefreshRight,
+} from '@element-plus/icons-vue';
 import {
   ElButton,
-  ElDropdown,
-  ElDropdownItem,
-  ElDropdownMenu,
-  ElForm,
-  ElFormItem,
   ElIcon,
-  ElInput,
   ElMessage,
   ElMessageBox,
   ElTable,
   ElTableColumn,
+  ElTooltip,
 } from 'element-plus';
 
 import { api } from '#/api/request';
@@ -30,116 +48,610 @@ import {
 import { buildKnowledgePath } from '#/views/ai/documentCollection/share-path';
 
 const props = defineProps({
-  documentId: {
-    type: String,
-    default: '',
-  },
-  manageable: {
-    type: Boolean,
-    default: true,
-  },
-  requestClient: {
-    type: Object as any,
-    default: () => api,
-  },
-  endpointPrefix: {
-    type: String,
-    default: '',
-  },
+  documentId: { type: String, default: '' },
+  manageable: { type: Boolean, default: true },
+  editable: { type: Boolean, default: undefined },
+  deletable: { type: Boolean, default: undefined },
+  requestClient: { type: Object as any, default: () => api },
+  endpointPrefix: { type: String, default: '' },
 });
-const dialogVisible = ref(false);
+
+type EditorMode = 'live' | 'source';
+type LiveEditorInstance = {
+  flushMarkdown?: () => string;
+  focus?: () => void;
+};
+type SourceEditorInstance = { focus?: () => void };
+
 const pageDataRef = ref();
-const handleEdit = (row: any) => {
-  if (!props.manageable) {
-    ElMessage.warning($t('documentCollection.managePermissionHint'));
-    return;
-  }
-  form.value = { id: row.id, content: row.content };
-  openDialog();
+const chunkRootRef = ref<HTMLElement>();
+const liveEditorRef = ref<LiveEditorInstance>();
+const sourceEditorRef = ref<SourceEditorInstance>();
+const setLiveEditorRef = (
+  instance: ComponentPublicInstance | Element | null,
+) => {
+  liveEditorRef.value = instance
+    ? (instance as unknown as LiveEditorInstance)
+    : undefined;
 };
-const handleDelete = (row: any) => {
-  if (!props.manageable) {
-    ElMessage.warning($t('documentCollection.managePermissionHint'));
-    return;
-  }
-  ElMessageBox.confirm($t('message.deleteAlert'), $t('message.noticeTitle'), {
-    confirmButtonText: $t('message.ok'),
-    cancelButtonText: $t('message.cancel'),
-    type: 'warning',
-  })
-    .then(() => {
-      btnLoading.value = true;
-      props.requestClient
-        .post(
-          buildKnowledgePath(
-            props.endpointPrefix,
-            '/api/v1/documentChunk/removeChunk',
-          ),
-          { id: row.id },
-        )
-        .then((res: any) => {
-          btnLoading.value = false;
-          if (res.errorCode !== 0) {
-            ElMessage.error(res.message);
-            return;
-          }
-          ElMessage.success($t('message.deleteOkMessage'));
-          pageDataRef.value.setQuery(queryParams);
-        });
-    })
-    .catch(() => {});
+const setSourceEditorRef = (
+  instance: ComponentPublicInstance | Element | null,
+) => {
+  sourceEditorRef.value = instance
+    ? (instance as unknown as SourceEditorInstance)
+    : undefined;
 };
-const openDialog = () => {
-  dialogVisible.value = true;
+const editingRowId = ref('');
+const initialMarkdown = ref('');
+const draftMarkdown = ref('');
+const liveMarkdownBaseline = ref('');
+const editorMode = ref<EditorMode>('live');
+const saving = ref(false);
+const deletingRowId = ref('');
+const retryingRowId = ref('');
+const liveEditorUnavailable = ref(false);
+const liveEditorCompatible = ref(true);
+const trustedImageRefs = ref(new Set<string>());
+const markdownCache = new Map<string, { markdown: string; source: string }>();
+const SYNC_SUCCESS_FEEDBACK_MS = 2200;
+const syncSuccessVersions = ref<Record<string, string>>({});
+const syncSuccessTimers = new Map<string, ReturnType<typeof setTimeout>>();
+const syncSuccessMotionStyle = {
+  '--chunk-sync-success-duration': `${SYNC_SUCCESS_FEEDBACK_MS}ms`,
 };
-const closeDialog = () => {
-  dialogVisible.value = false;
+let statusPollTimer: ReturnType<typeof setTimeout> | undefined;
+let statusPollStartedAt = 0;
+let statusPollGeneration = 0;
+
+const canEdit = computed(() => props.editable ?? props.manageable);
+const canDelete = computed(() => props.deletable ?? props.manageable);
+const isDirty = computed(
+  () =>
+    Boolean(editingRowId.value) &&
+    draftMarkdown.value !== initialMarkdown.value,
+);
+const canUseLiveEditor = computed(
+  () =>
+    !liveEditorUnavailable.value &&
+    liveEditorCompatible.value &&
+    draftMarkdown.value.length <= MAX_LIVE_MARKDOWN_CHARACTERS,
+);
+
+const clearSyncSuccessFeedback = (rowId: unknown) => {
+  const id = String(rowId || '');
+  if (!id) return;
+  const timer = syncSuccessTimers.get(id);
+  if (timer) clearTimeout(timer);
+  syncSuccessTimers.delete(id);
+  if (!(id in syncSuccessVersions.value)) return;
+  const nextVersions = { ...syncSuccessVersions.value };
+  delete nextVersions[id];
+  syncSuccessVersions.value = nextVersions;
 };
-const queryParams = ref({
-  documentId: props.documentId,
-  sortKey: 'sorting',
-  sortType: 'asc',
-});
-const save = () => {
-  if (!props.manageable) {
-    ElMessage.warning($t('documentCollection.managePermissionHint'));
-    return;
-  }
-  btnLoading.value = true;
-  props.requestClient
-    .post(
-      buildKnowledgePath(props.endpointPrefix, '/api/v1/documentChunk/update'),
-      form.value,
-    )
-    .then((res: any) => {
-      btnLoading.value = false;
-      if (res.errorCode !== 0) {
-        ElMessage.error(res.message);
-        return;
-      }
-      ElMessage.success($t('message.updateOkMessage'));
-      pageDataRef.value.setQuery(queryParams);
-      closeDialog();
-    });
+
+const clearAllSyncSuccessFeedback = () => {
+  syncSuccessTimers.forEach((timer) => clearTimeout(timer));
+  syncSuccessTimers.clear();
+  syncSuccessVersions.value = {};
 };
-const btnLoading = ref(false);
-const basicFormRef = ref();
-const form = ref({
-  id: '',
-  content: '',
-});
+
+const showSyncSuccessFeedback = (row: any) => {
+  const id = String(row?.id || '');
+  if (!id) return;
+  clearSyncSuccessFeedback(id);
+  syncSuccessVersions.value = {
+    ...syncSuccessVersions.value,
+    [id]: String(row?.indexSyncVersion ?? ''),
+  };
+  syncSuccessTimers.set(
+    id,
+    setTimeout(() => clearSyncSuccessFeedback(id), SYNC_SUCCESS_FEEDBACK_MS),
+  );
+};
+
+const isSyncSuccessVisible = (row: any) =>
+  syncSuccessVersions.value[String(row?.id || '')] ===
+  String(row?.indexSyncVersion ?? '');
 
 const getChunkOptions = (row: any) => row?.options || {};
+const getRawMarkdown = (row: any) =>
+  String(getChunkOptions(row)?.renderMarkdown ?? row?.content ?? '');
+const getMarkdown = (row: any) => {
+  const source = getRawMarkdown(row);
+  const key = String(row?.id || '');
+  const cached = markdownCache.get(key);
+  if (cached?.source === source) return cached.markdown;
+  const markdown = resolveMarkdownContent(source);
+  markdownCache.set(key, { markdown, source });
+  return markdown;
+};
+const isEditing = (row: any) => String(row?.id || '') === editingRowId.value;
 
-const getMarkdown = (row: any) =>
-  resolveMarkdownContent(getChunkOptions(row)?.renderMarkdown || row?.content);
+const ensurePermission = (allowed: boolean) => {
+  if (allowed) return true;
+  ElMessage.warning($t('documentCollection.managePermissionHint'));
+  return false;
+};
+
+const resetEditor = () => {
+  editingRowId.value = '';
+  initialMarkdown.value = '';
+  draftMarkdown.value = '';
+  liveMarkdownBaseline.value = '';
+  editorMode.value = 'live';
+  liveEditorCompatible.value = true;
+  trustedImageRefs.value = new Set();
+};
+
+const flushActiveMarkdown = () => {
+  if (editorMode.value !== 'live' || !canUseLiveEditor.value) return;
+  const currentMarkdown =
+    liveEditorRef.value?.flushMarkdown?.() ?? draftMarkdown.value;
+  draftMarkdown.value = hasEquivalentMarkdownSemantics(
+    liveMarkdownBaseline.value,
+    currentMarkdown,
+  )
+    ? liveMarkdownBaseline.value
+    : currentMarkdown;
+};
+
+const confirmLeave = async () => {
+  if (saving.value || deletingRowId.value) return false;
+  flushActiveMarkdown();
+  if (!isDirty.value) return true;
+  try {
+    await ElMessageBox.confirm(
+      $t('documentCollection.chunkUnsavedConfirm'),
+      $t('documentCollection.chunkUnsavedTitle'),
+      {
+        cancelButtonText: $t('documentCollection.continueEditing'),
+        confirmButtonText: $t('documentCollection.discardChanges'),
+        type: 'warning',
+      },
+    );
+    resetEditor();
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+defineExpose({ confirmLeave });
+
+const handleEdit = async (row: any) => {
+  if (
+    !ensurePermission(canEdit.value) ||
+    saving.value ||
+    deletingRowId.value ||
+    isEditing(row)
+  ) {
+    return;
+  }
+  if (!(await confirmLeave())) return;
+  clearSyncSuccessFeedback(row.id);
+  const markdown = getRawMarkdown(row);
+  editingRowId.value = String(row.id);
+  initialMarkdown.value = markdown;
+  draftMarkdown.value = markdown;
+  liveMarkdownBaseline.value = markdown;
+  liveEditorCompatible.value = !containsRawHtml(getMarkdown(row));
+  trustedImageRefs.value = new Set(
+    (Array.isArray(getChunkOptions(row)?.imageRefs)
+      ? getChunkOptions(row).imageRefs
+      : []
+    ).map((item: unknown) => String(item || '').trim()),
+  );
+  editorMode.value =
+    markdown.length > MAX_LIVE_MARKDOWN_CHARACTERS ||
+    !liveEditorCompatible.value
+      ? 'source'
+      : 'live';
+  if (editorMode.value === 'source') {
+    await nextTick();
+    sourceEditorRef.value?.focus?.();
+  }
+};
+
+const handleCancel = async () => {
+  if (await confirmLeave()) resetEditor();
+};
+
+const handleEditorFallback = () => {
+  flushActiveMarkdown();
+  liveEditorCompatible.value = false;
+  if (editorMode.value === 'source') return;
+  editorMode.value = 'source';
+  ElMessage.warning($t('documentCollection.chunkSourceFallback'));
+  void nextTick(() => sourceEditorRef.value?.focus?.());
+};
+
+const setEditorMode = async (mode: EditorMode) => {
+  if (saving.value || deletingRowId.value) return;
+  if (mode === editorMode.value) return;
+  if (
+    mode === 'live' &&
+    containsRawHtml(resolveMarkdownContent(draftMarkdown.value))
+  ) {
+    liveEditorCompatible.value = false;
+    ElMessage.warning($t('documentCollection.chunkSourceFallback'));
+    return;
+  }
+  if (mode === 'source') flushActiveMarkdown();
+  else liveMarkdownBaseline.value = draftMarkdown.value;
+  editorMode.value = mode;
+  await nextTick();
+  if (mode === 'source') sourceEditorRef.value?.focus?.();
+  else liveEditorRef.value?.focus?.();
+};
+
+const MarkdownLiveEditor = defineAsyncComponent(async () => {
+  try {
+    return await import('@easyflow-core/editor-ui/markdown-live-editor').then(
+      (module) => module.default,
+    );
+  } catch {
+    liveEditorUnavailable.value = true;
+    handleEditorFallback();
+    return MarkdownSourceEditor;
+  }
+});
+
+const resolveMarkdownImage = (url: string) => {
+  const value = url.trim();
+  const safeExternalUrl = resolveSafeExternalMarkdownImageUrl(value);
+  if (safeExternalUrl !== EMPTY_IMAGE_DATA_URL) return safeExternalUrl;
+  if (!trustedImageRefs.value.has(value)) return EMPTY_IMAGE_DATA_URL;
+  try {
+    const parsed = new URL(value, window.location.href);
+    if (
+      !['http:', 'https:'].includes(parsed.protocol) ||
+      parsed.username ||
+      parsed.password
+    ) {
+      return EMPTY_IMAGE_DATA_URL;
+    }
+    return parsed.href;
+  } catch {
+    return EMPTY_IMAGE_DATA_URL;
+  }
+};
+
+const updateRow = (row: any, updated: any) => {
+  const nextSyncStatus = updated?.indexSyncStatus ?? row.indexSyncStatus;
+  const nextSyncVersion = updated?.indexSyncVersion ?? row.indexSyncVersion;
+  pageDataRef.value?.patchRowById?.(row.id, {
+    content: updated?.content ?? row.content,
+    indexSyncErrorCode: updated?.indexSyncErrorCode ?? null,
+    indexSyncErrorMessage: updated?.indexSyncErrorMessage ?? null,
+    indexSyncStatus: nextSyncStatus,
+    indexSyncVersion: nextSyncVersion,
+    options: updated?.options ?? {
+      ...getChunkOptions(row),
+      renderMarkdown: draftMarkdown.value,
+    },
+  });
+  if (
+    nextSyncStatus === 'SYNCED' &&
+    (row.indexSyncStatus !== 'SYNCED' ||
+      nextSyncVersion !== row.indexSyncVersion)
+  ) {
+    showSyncSuccessFeedback({ id: row.id, indexSyncVersion: nextSyncVersion });
+  } else {
+    clearSyncSuccessFeedback(row.id);
+  }
+};
+
+const getPageRows = () => pageDataRef.value?.getPageRows?.() || [];
+const getPendingRows = () =>
+  getPageRows().filter((row: any) => row?.indexSyncStatus === 'PENDING');
+
+const clearStatusPoll = () => {
+  if (statusPollTimer) clearTimeout(statusPollTimer);
+  statusPollTimer = undefined;
+};
+
+const scheduleStatusPoll = (reset = false) => {
+  clearStatusPoll();
+  const generation = ++statusPollGeneration;
+  if (document.hidden || getPendingRows().length === 0) return;
+  if (reset || statusPollStartedAt === 0) statusPollStartedAt = Date.now();
+  const delay = Date.now() - statusPollStartedAt < 30_000 ? 2000 : 5000;
+  statusPollTimer = setTimeout(() => void pollSyncStatus(generation), delay);
+};
+
+const pollSyncStatus = async (generation: number) => {
+  statusPollTimer = undefined;
+  if (document.hidden || generation !== statusPollGeneration) return;
+  const pendingRows = getPendingRows();
+  if (pendingRows.length === 0) return;
+  const expectedVersions = new Map(
+    pendingRows.map((row: any) => [String(row.id), row.indexSyncVersion]),
+  );
+  try {
+    const res = await props.requestClient.post(
+      buildKnowledgePath(
+        props.endpointPrefix,
+        '/api/v1/documentChunk/syncStatus',
+      ),
+      {
+        documentId: props.documentId,
+        ids: pendingRows.map((row: any) => row.id),
+      },
+    );
+    if (generation !== statusPollGeneration || res.errorCode !== 0) return;
+    for (const status of res.data || []) {
+      const id = String(status?.id || '');
+      const current = getPageRows().find((row: any) => String(row.id) === id);
+      if (
+        !current ||
+        current.indexSyncStatus !== 'PENDING' ||
+        current.indexSyncVersion !== expectedVersions.get(id) ||
+        status.indexSyncVersion !== expectedVersions.get(id)
+      ) {
+        continue;
+      }
+      pageDataRef.value?.patchRowById?.(status.id, status);
+      if (status.indexSyncStatus === 'SYNCED') {
+        showSyncSuccessFeedback(status);
+      } else {
+        clearSyncSuccessFeedback(status.id);
+      }
+    }
+  } catch {
+    // 状态查询失败时保持当前行状态，下一轮自动重试。
+  } finally {
+    if (generation === statusPollGeneration) scheduleStatusPoll();
+  }
+};
+
+const handlePageLoad = () => {
+  markdownCache.clear();
+  clearAllSyncSuccessFeedback();
+  scheduleStatusPoll(true);
+};
+
+const handleVisibilityChange = () => {
+  if (document.hidden) {
+    clearStatusPoll();
+    statusPollGeneration++;
+    return;
+  }
+  scheduleStatusPoll(true);
+};
+
+const retrySync = async (row: any) => {
+  if (
+    !ensurePermission(canEdit.value) ||
+    retryingRowId.value ||
+    row?.indexSyncStatus !== 'FAILED'
+  ) {
+    return;
+  }
+  const rowId = String(row.id);
+  const expectedVersion = row.indexSyncVersion;
+  clearStatusPoll();
+  const generation = ++statusPollGeneration;
+  retryingRowId.value = rowId;
+  try {
+    const res = await props.requestClient.post(
+      buildKnowledgePath(
+        props.endpointPrefix,
+        '/api/v1/documentChunk/retrySync',
+      ),
+      { id: row.id, indexSyncVersion: expectedVersion },
+    );
+    if (res.errorCode !== 0) {
+      ElMessage.error(
+        res.message || $t('documentCollection.chunkSyncRetryFailed'),
+      );
+      return;
+    }
+    const current = getPageRows().find(
+      (item: any) => String(item?.id || '') === rowId,
+    );
+    if (
+      generation === statusPollGeneration &&
+      current?.indexSyncStatus === 'FAILED' &&
+      current.indexSyncVersion === expectedVersion &&
+      res.data?.indexSyncVersion === expectedVersion
+    ) {
+      pageDataRef.value?.patchRowById?.(row.id, {
+        indexSyncErrorCode: res.data?.indexSyncErrorCode ?? null,
+        indexSyncErrorMessage: res.data?.indexSyncErrorMessage ?? null,
+        indexSyncStatus: res.data?.indexSyncStatus,
+        indexSyncVersion: res.data?.indexSyncVersion,
+      });
+    }
+  } catch (error) {
+    ElMessage.error(
+      error instanceof Error
+        ? error.message
+        : $t('documentCollection.chunkSyncRetryFailed'),
+    );
+  } finally {
+    if (retryingRowId.value === rowId) retryingRowId.value = '';
+    scheduleStatusPoll(true);
+  }
+};
+
+const getChunkFocusIndex = (chunkId: unknown) => {
+  const chunks = [
+    ...(chunkRootRef.value?.querySelectorAll<HTMLElement>('[data-chunk-id]') ||
+      []),
+  ];
+  return Math.max(
+    chunks.findIndex(
+      (element) => element.dataset.chunkId === String(chunkId || ''),
+    ),
+    0,
+  );
+};
+
+const focusAfterDelete = async (preferredIndex: number) => {
+  await nextTick();
+  const chunks = [
+    ...(chunkRootRef.value?.querySelectorAll<HTMLElement>('[data-chunk-id]') ||
+      []),
+  ];
+  if (chunks.length > 0) {
+    chunks[Math.min(preferredIndex, chunks.length - 1)]?.focus();
+    return;
+  }
+  chunkRootRef.value
+    ?.querySelector<HTMLElement>('.el-pagination button:not([disabled])')
+    ?.focus();
+};
+
+const focusActiveEditor = async () => {
+  await nextTick();
+  if (editorMode.value === 'live') {
+    liveEditorRef.value?.focus?.();
+  } else {
+    sourceEditorRef.value?.focus?.();
+  }
+  const activeChunk = [
+    ...(chunkRootRef.value?.querySelectorAll<HTMLElement>('[data-chunk-id]') ||
+      []),
+  ].find(
+    (element) => element.dataset.chunkId === String(editingRowId.value || ''),
+  );
+  activeChunk
+    ?.querySelector<HTMLElement>(
+      '[contenteditable="true"], textarea, [role="textbox"]',
+    )
+    ?.focus();
+};
+
+const deleteChunk = async (
+  row: any,
+  confirmMode: 'empty' | 'regular' = 'regular',
+) => {
+  if (
+    !ensurePermission(canDelete.value) ||
+    saving.value ||
+    deletingRowId.value
+  ) {
+    return false;
+  }
+  if (editingRowId.value && !isEditing(row)) return false;
+  deletingRowId.value = String(row.id);
+  try {
+    try {
+      await ElMessageBox.confirm(
+        confirmMode === 'empty'
+          ? $t('documentCollection.emptyChunkDeleteConfirm')
+          : $t('message.deleteAlert'),
+        confirmMode === 'empty'
+          ? $t('documentCollection.deleteChunk')
+          : $t('message.noticeTitle'),
+        {
+          confirmButtonText:
+            confirmMode === 'empty'
+              ? $t('documentCollection.deleteChunk')
+              : $t('button.confirm'),
+          cancelButtonText:
+            confirmMode === 'empty'
+              ? $t('documentCollection.continueEditing')
+              : $t('button.cancel'),
+          type: 'warning',
+        },
+      );
+    } catch {
+      deletingRowId.value = '';
+      if (confirmMode === 'empty') await focusActiveEditor();
+      return false;
+    }
+    const preferredFocusIndex = getChunkFocusIndex(row.id);
+    const res = await props.requestClient.post(
+      buildKnowledgePath(
+        props.endpointPrefix,
+        '/api/v1/documentChunk/removeChunk',
+      ),
+      { id: row.id },
+    );
+    if (res.errorCode !== 0 || res.data === false) {
+      ElMessage.error(res.message || $t('message.deleteFailMessage'));
+      return false;
+    }
+    resetEditor();
+    markdownCache.delete(String(row.id));
+    clearSyncSuccessFeedback(row.id);
+    clearStatusPoll();
+    statusPollGeneration++;
+    pageDataRef.value?.removeRowById?.(row.id);
+    ElMessage.success($t('message.deleteOkMessage'));
+    scheduleStatusPoll(true);
+    await focusAfterDelete(preferredFocusIndex);
+    return true;
+  } catch (error) {
+    ElMessage.error(
+      error instanceof Error ? error.message : $t('message.deleteFailMessage'),
+    );
+    return false;
+  } finally {
+    deletingRowId.value = '';
+  }
+};
+
+const save = async (row: any) => {
+  if (!ensurePermission(canEdit.value) || saving.value || deletingRowId.value) {
+    return;
+  }
+  flushActiveMarkdown();
+  if (draftMarkdown.value.trim().length === 0) {
+    await deleteChunk(row, 'empty');
+    return;
+  }
+  if (!isDirty.value) {
+    resetEditor();
+    return;
+  }
+  saving.value = true;
+  try {
+    const res = await props.requestClient.post(
+      buildKnowledgePath(props.endpointPrefix, '/api/v1/documentChunk/update'),
+      { content: draftMarkdown.value, id: row.id },
+    );
+    if (res.errorCode !== 0) {
+      ElMessage.error(res.message || $t('message.saveFailMessage'));
+      return;
+    }
+    updateRow(row, res.data);
+    resetEditor();
+    scheduleStatusPoll(true);
+  } catch (error) {
+    ElMessage.error(
+      error instanceof Error ? error.message : $t('message.saveFailMessage'),
+    );
+  } finally {
+    saving.value = false;
+  }
+};
+
+const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+  flushActiveMarkdown();
+  if (!isDirty.value && !saving.value && !deletingRowId.value) return;
+  event.preventDefault();
+  event.returnValue = '';
+};
+
+onMounted(() => {
+  window.addEventListener('beforeunload', handleBeforeUnload);
+  document.addEventListener('visibilitychange', handleVisibilityChange);
+});
+onBeforeUnmount(() => {
+  clearStatusPoll();
+  clearAllSyncSuccessFeedback();
+  statusPollGeneration++;
+  window.removeEventListener('beforeunload', handleBeforeUnload);
+  document.removeEventListener('visibilitychange', handleVisibilityChange);
+});
 
 const isExcelChunk = (row: any) => {
   const options = getChunkOptions(row);
   const sourceFileExt = String(
     options?.sourceFileExt || options?.['splitter.sourceFileExt'] || '',
   ).toLowerCase();
-
   return Boolean(
     sourceFileExt === 'xlsx' ||
       sourceFileExt === 'csv' ||
@@ -151,19 +663,12 @@ const isExcelChunk = (row: any) => {
 
 const shouldUseExcelChunkCards = (pageList: any[] = []) =>
   pageList.length > 0 && pageList.every((row) => isExcelChunk(row));
-
 const getSheetName = (row: any) =>
   String(getChunkOptions(row)?.sheetName || '');
-
-const getRowStart = (row: any) => {
-  const rowStart = Number(getChunkOptions(row)?.rowStart || 0);
-  return Math.max(rowStart, 0);
-};
-
-const getRowEnd = (row: any) => {
-  const rowEnd = Number(getChunkOptions(row)?.rowEnd || 0);
-  return Math.max(rowEnd, 0);
-};
+const getRowStart = (row: any) =>
+  Math.max(Number(getChunkOptions(row)?.rowStart || 0), 0);
+const getRowEnd = (row: any) =>
+  Math.max(Number(getChunkOptions(row)?.rowEnd || 0), 0);
 
 const getRowRangeLabel = (row: any) => {
   const rowStart = getRowStart(row);
@@ -173,292 +678,524 @@ const getRowRangeLabel = (row: any) => {
       ? `第 ${rowStart} 行`
       : `第 ${rowStart}-${rowEnd} 行`;
   }
-  if (rowStart > 0) {
-    return `第 ${rowStart} 行起`;
-  }
-  return '';
+  return rowStart > 0 ? `第 ${rowStart} 行起` : '';
 };
 
 const getChunkTitle = (row: any) => {
   const options = getChunkOptions(row);
-  if (options?.sourceLabel) {
-    return String(options.sourceLabel);
-  }
+  if (options?.sourceLabel) return String(options.sourceLabel);
   const sheetName = getSheetName(row);
   const rowRangeLabel = getRowRangeLabel(row);
-  if (sheetName && rowRangeLabel) {
-    return `${sheetName} · ${rowRangeLabel}`;
-  }
+  if (sheetName && rowRangeLabel) return `${sheetName} · ${rowRangeLabel}`;
   return sheetName || row?.id || '-';
 };
 
-const getChunkIndexLabel = (row: any) => {
-  const sorting = Number(row?.sorting || 0);
-  if (sorting <= 0) {
-    return '';
-  }
-  return String(sorting).padStart(2, '0');
-};
-
 const getChunkHeaderLabel = (row: any) => {
-  const chunkIndexLabel = getChunkIndexLabel(row);
-  const chunkTitle = getChunkTitle(row);
-  if (chunkIndexLabel) {
-    return `分块 ${chunkIndexLabel} · ${chunkTitle}`;
-  }
-  return chunkTitle;
+  const sorting = Number(row?.sorting || 0);
+  const index = sorting > 0 ? String(sorting).padStart(2, '0') : '';
+  return index ? `分块 ${index} · ${getChunkTitle(row)}` : getChunkTitle(row);
 };
 </script>
 
 <template>
-  <div>
+  <div ref="chunkRootRef" class="chunk-table-root">
     <PageData
+      ref="pageDataRef"
       :page-url="
         buildKnowledgePath(props.endpointPrefix, '/api/v1/documentChunk/page')
       "
-      ref="pageDataRef"
       :page-size="10"
       :request-client="props.requestClient"
-      :extra-query-params="queryParams"
+      :extra-query-params="{
+        documentId: props.documentId,
+        sortKey: 'sorting',
+        sortType: 'asc',
+      }"
+      :before-page-change="confirmLeave"
+      @load-success="handlePageLoad"
     >
       <template #default="{ pageList }">
-        <div v-if="shouldUseExcelChunkCards(pageList)" class="chunk-board">
-          <article v-for="row in pageList" :key="row.id" class="chunk-card">
-            <div v-if="props.manageable" class="chunk-card__toolbar">
-              <ElButton
-                circle
-                text
-                type="primary"
-                class="chunk-card__action"
-                @click="handleEdit(row)"
-              >
-                <ElIcon><EditPen /></ElIcon>
-              </ElButton>
-              <ElDropdown>
+        <div v-if="shouldUseExcelChunkCards(pageList)" class="chunk-list">
+          <article
+            v-for="row in pageList"
+            :key="row.id"
+            class="chunk-item"
+            :data-chunk-id="String(row.id)"
+            tabindex="-1"
+          >
+            <div class="chunk-item__header">
+              <span>{{ getChunkHeaderLabel(row) }}</span>
+              <div class="chunk-actions">
+                <span class="chunk-sync-status" aria-live="polite">
+                  <ElTooltip
+                    v-if="row.indexSyncStatus === 'PENDING'"
+                    :content="$t('documentCollection.chunkSyncPending')"
+                    placement="top"
+                  >
+                    <ElIcon
+                      class="chunk-sync-status__pending is-loading"
+                      :aria-label="$t('documentCollection.chunkSyncPending')"
+                    >
+                      <Loading />
+                    </ElIcon>
+                  </ElTooltip>
+                  <ElTooltip
+                    v-else-if="canEdit && row.indexSyncStatus === 'FAILED'"
+                    :content="$t('documentCollection.chunkSyncFailed')"
+                    placement="top"
+                  >
+                    <ElButton
+                      class="chunk-sync-status__retry"
+                      link
+                      type="danger"
+                      :aria-label="$t('documentCollection.chunkSyncFailed')"
+                      :icon="RefreshRight"
+                      :loading="retryingRowId === String(row.id)"
+                      @click="retrySync(row)"
+                    />
+                  </ElTooltip>
+                  <ElIcon
+                    v-else-if="isSyncSuccessVisible(row)"
+                    class="chunk-sync-status__success"
+                    :style="syncSuccessMotionStyle"
+                    :aria-label="$t('documentCollection.chunkSyncSucceeded')"
+                  >
+                    <Check />
+                  </ElIcon>
+                </span>
                 <ElButton
-                  circle
-                  text
-                  class="chunk-card__action chunk-card__action--ghost"
+                  v-if="canEdit && !isEditing(row)"
+                  link
+                  type="primary"
+                  :icon="EditPen"
+                  @click="handleEdit(row)"
                 >
-                  <ElIcon><MoreFilled /></ElIcon>
+                  {{ $t('button.edit') }}
+                </ElButton>
+                <ElButton
+                  v-if="canDelete && !isEditing(row)"
+                  link
+                  type="danger"
+                  :icon="Delete"
+                  :disabled="Boolean(editingRowId)"
+                  :loading="deletingRowId === String(row.id)"
+                  @click="deleteChunk(row)"
+                >
+                  {{ $t('button.delete') }}
                 </ElButton>
-
-                <template #dropdown>
-                  <ElDropdownMenu>
-                    <ElDropdownItem @click="handleDelete(row)">
-                      <ElButton link type="danger" :icon="Delete">
-                        {{ $t('button.delete') }}
-                      </ElButton>
-                    </ElDropdownItem>
-                  </ElDropdownMenu>
-                </template>
-              </ElDropdown>
-            </div>
-
-            <div class="chunk-card__header">
-              <div class="chunk-card__eyebrow">
-                <span class="chunk-card__eyebrow-dot"></span>
-                <span>{{ getChunkHeaderLabel(row) }}</span>
               </div>
             </div>
 
-            <div v-if="getMarkdown(row)" class="chunk-card__content">
-              <div class="chunk-rich-content chunk-rich-content--card">
-                <ElXMarkdown
-                  :markdown="getMarkdown(row)"
-                  :allow-html="markdownRenderProps.allowHtml"
-                  :sanitize="markdownRenderProps.sanitize"
+            <div
+              v-if="isEditing(row)"
+              class="inline-editor"
+              :class="
+                editorMode === 'live' && canUseLiveEditor
+                  ? 'is-live-mode'
+                  : 'is-source-mode'
+              "
+            >
+              <div class="inline-editor__toolbar">
+                <div v-if="canUseLiveEditor" class="inline-editor__modes">
+                  <ElButton
+                    link
+                    :disabled="saving || Boolean(deletingRowId)"
+                    :type="editorMode === 'live' ? 'primary' : ''"
+                    @click="setEditorMode('live')"
+                  >
+                    {{ $t('documentCollection.chunkLiveMode') }}
+                  </ElButton>
+                  <ElButton
+                    link
+                    :disabled="saving || Boolean(deletingRowId)"
+                    :type="editorMode === 'source' ? 'primary' : ''"
+                    @click="setEditorMode('source')"
+                  >
+                    {{ $t('documentCollection.chunkSourceMode') }}
+                  </ElButton>
+                </div>
+                <span v-else></span>
+                <div class="inline-editor__actions">
+                  <ElButton
+                    text
+                    size="small"
+                    :disabled="saving || Boolean(deletingRowId)"
+                    @click="handleCancel"
+                  >
+                    {{ $t('button.cancel') }}
+                  </ElButton>
+                  <ElButton
+                    type="primary"
+                    size="small"
+                    :loading="saving || deletingRowId === String(row.id)"
+                    @click="save(row)"
+                  >
+                    {{ $t('button.save') }}
+                  </ElButton>
+                </div>
+              </div>
+              <div class="inline-editor__surface">
+                <MarkdownLiveEditor
+                  v-if="editorMode === 'live' && canUseLiveEditor"
+                  :ref="setLiveEditorRef"
+                  v-model="draftMarkdown"
+                  autofocus
+                  :readonly="saving || Boolean(deletingRowId)"
+                  :resolve-image-url="resolveMarkdownImage"
+                  variant="inline"
+                  @error="handleEditorFallback"
+                  @fidelity-loss="handleEditorFallback"
+                  @save="save(row)"
+                />
+                <MarkdownSourceEditor
+                  v-else
+                  :ref="setSourceEditorRef"
+                  v-model="draftMarkdown"
+                  :highlight="false"
+                  :readonly="saving || Boolean(deletingRowId)"
+                  @save="save(row)"
                 />
               </div>
             </div>
-            <span v-else class="chunk-table__empty">-</span>
+            <div v-else-if="getMarkdown(row)" class="chunk-rich-content">
+              <ElXMarkdown
+                :markdown="getMarkdown(row)"
+                :allow-html="markdownRenderProps.allowHtml"
+                :sanitize="markdownRenderProps.sanitize"
+              />
+            </div>
+            <span v-else class="chunk-empty">-</span>
           </article>
         </div>
 
-        <ElTable v-else :data="pageList" style="width: 100%" size="large">
+        <ElTable
+          v-else
+          class="chunk-data-table"
+          :data="pageList"
+          row-key="id"
+          style="width: 100%"
+          size="large"
+        >
           <ElTableColumn
             prop="content"
             :label="$t('documentCollection.content')"
-            min-width="240"
+            min-width="320"
           >
             <template #default="{ row }">
-              <div v-if="getMarkdown(row)" class="chunk-rich-content">
-                <ElXMarkdown
-                  :markdown="getMarkdown(row)"
-                  :allow-html="markdownRenderProps.allowHtml"
-                  :sanitize="markdownRenderProps.sanitize"
-                />
+              <div
+                class="chunk-content-cell"
+                :data-chunk-id="String(row.id)"
+                tabindex="-1"
+              >
+                <div
+                  v-if="isEditing(row)"
+                  class="inline-editor"
+                  :class="
+                    editorMode === 'live' && canUseLiveEditor
+                      ? 'is-live-mode'
+                      : 'is-source-mode'
+                  "
+                >
+                  <div class="inline-editor__toolbar">
+                    <div v-if="canUseLiveEditor" class="inline-editor__modes">
+                      <ElButton
+                        link
+                        :disabled="saving || Boolean(deletingRowId)"
+                        :type="editorMode === 'live' ? 'primary' : ''"
+                        @click="setEditorMode('live')"
+                      >
+                        {{ $t('documentCollection.chunkLiveMode') }}
+                      </ElButton>
+                      <ElButton
+                        link
+                        :disabled="saving || Boolean(deletingRowId)"
+                        :type="editorMode === 'source' ? 'primary' : ''"
+                        @click="setEditorMode('source')"
+                      >
+                        {{ $t('documentCollection.chunkSourceMode') }}
+                      </ElButton>
+                    </div>
+                    <span v-else></span>
+                    <div class="inline-editor__actions">
+                      <ElButton
+                        text
+                        size="small"
+                        :disabled="saving || Boolean(deletingRowId)"
+                        @click="handleCancel"
+                      >
+                        {{ $t('button.cancel') }}
+                      </ElButton>
+                      <ElButton
+                        type="primary"
+                        size="small"
+                        :loading="saving || deletingRowId === String(row.id)"
+                        @click="save(row)"
+                      >
+                        {{ $t('button.save') }}
+                      </ElButton>
+                    </div>
+                  </div>
+                  <div class="inline-editor__surface">
+                    <MarkdownLiveEditor
+                      v-if="editorMode === 'live' && canUseLiveEditor"
+                      :ref="setLiveEditorRef"
+                      v-model="draftMarkdown"
+                      autofocus
+                      :readonly="saving || Boolean(deletingRowId)"
+                      :resolve-image-url="resolveMarkdownImage"
+                      variant="inline"
+                      @error="handleEditorFallback"
+                      @fidelity-loss="handleEditorFallback"
+                      @save="save(row)"
+                    />
+                    <MarkdownSourceEditor
+                      v-else
+                      :ref="setSourceEditorRef"
+                      v-model="draftMarkdown"
+                      :highlight="false"
+                      :readonly="saving || Boolean(deletingRowId)"
+                      @save="save(row)"
+                    />
+                  </div>
+                </div>
+                <div v-else-if="getMarkdown(row)" class="chunk-rich-content">
+                  <ElXMarkdown
+                    :markdown="getMarkdown(row)"
+                    :allow-html="markdownRenderProps.allowHtml"
+                    :sanitize="markdownRenderProps.sanitize"
+                  />
+                </div>
+                <span v-else class="chunk-empty">-</span>
               </div>
-              <span v-else class="chunk-table__empty">-</span>
             </template>
           </ElTableColumn>
           <ElTableColumn
-            v-if="props.manageable"
+            v-if="canEdit || canDelete"
             :label="$t('common.handle')"
-            width="100"
+            width="160"
             align="right"
           >
             <template #default="{ row }">
-              <div class="flex items-center gap-3">
-                <ElButton link type="primary" @click="handleEdit(row)">
+              <div class="chunk-actions">
+                <span class="chunk-sync-status" aria-live="polite">
+                  <ElTooltip
+                    v-if="row.indexSyncStatus === 'PENDING'"
+                    :content="$t('documentCollection.chunkSyncPending')"
+                    placement="top"
+                  >
+                    <ElIcon
+                      class="chunk-sync-status__pending is-loading"
+                      :aria-label="$t('documentCollection.chunkSyncPending')"
+                    >
+                      <Loading />
+                    </ElIcon>
+                  </ElTooltip>
+                  <ElTooltip
+                    v-else-if="canEdit && row.indexSyncStatus === 'FAILED'"
+                    :content="$t('documentCollection.chunkSyncFailed')"
+                    placement="top"
+                  >
+                    <ElButton
+                      class="chunk-sync-status__retry"
+                      link
+                      type="danger"
+                      :aria-label="$t('documentCollection.chunkSyncFailed')"
+                      :icon="RefreshRight"
+                      :loading="retryingRowId === String(row.id)"
+                      @click="retrySync(row)"
+                    />
+                  </ElTooltip>
+                  <ElIcon
+                    v-else-if="isSyncSuccessVisible(row)"
+                    class="chunk-sync-status__success"
+                    :style="syncSuccessMotionStyle"
+                    :aria-label="$t('documentCollection.chunkSyncSucceeded')"
+                  >
+                    <Check />
+                  </ElIcon>
+                </span>
+                <ElButton
+                  v-if="canEdit && !isEditing(row)"
+                  link
+                  type="primary"
+                  @click="handleEdit(row)"
+                >
                   {{ $t('button.edit') }}
                 </ElButton>
-
-                <ElDropdown>
-                  <ElButton link :icon="MoreFilled" />
-
-                  <template #dropdown>
-                    <ElDropdownMenu>
-                      <ElDropdownItem @click="handleDelete(row)">
-                        <ElButton link type="danger" :icon="Delete">
-                          {{ $t('button.delete') }}
-                        </ElButton>
-                      </ElDropdownItem>
-                    </ElDropdownMenu>
-                  </template>
-                </ElDropdown>
+                <ElButton
+                  v-if="canDelete && !isEditing(row)"
+                  link
+                  type="danger"
+                  :disabled="Boolean(editingRowId)"
+                  :loading="deletingRowId === String(row.id)"
+                  @click="deleteChunk(row)"
+                >
+                  {{ $t('button.delete') }}
+                </ElButton>
               </div>
             </template>
           </ElTableColumn>
         </ElTable>
       </template>
     </PageData>
-    <EasyFlowFormModal
-      v-if="props.manageable"
-      v-model:open="dialogVisible"
-      :closable="!btnLoading"
-      :title="$t('button.edit')"
-      width="50%"
-      :confirm-loading="btnLoading"
-      :confirm-text="$t('button.save')"
-      :submitting="btnLoading"
-      @confirm="save"
-    >
-      <ElForm
-        ref="basicFormRef"
-        :model="form"
-        label-position="top"
-        class="easyflow-modal-form easyflow-modal-form--compact"
-      >
-        <ElFormItem>
-          <ElInput v-model="form.content" :rows="20" type="textarea" />
-        </ElFormItem>
-      </ElForm>
-    </EasyFlowFormModal>
   </div>
 </template>
 
 <style scoped>
-.chunk-board {
-  display: grid;
-  gap: 14px;
-}
-
-.chunk-card {
-  position: relative;
-  padding: 20px 20px 18px;
-  overflow: hidden;
-  background: var(--el-fill-color-blank);
-  background: linear-gradient(
-    135deg,
-    color-mix(in srgb, var(--el-color-primary-light-9) 80%, white) 0%,
-    var(--el-fill-color-blank) 38%
-  );
-  border: 1px solid var(--el-border-color-light);
-  border: 1px solid color-mix(in srgb, var(--el-border-color-light) 78%, white);
-  border-radius: 18px;
-  box-shadow: 0 18px 40px rgb(15 23 42 / 6%);
-}
-
-.chunk-card::before {
-  position: absolute;
-  inset: 0 auto 0 0;
-  width: 4px;
-  content: '';
-  background: var(--el-color-primary);
-  background: linear-gradient(
-    180deg,
-    var(--el-color-primary),
-    color-mix(in srgb, var(--el-color-primary) 44%, white)
-  );
-}
-
-.chunk-card__toolbar {
-  position: absolute;
-  top: 14px;
-  right: 14px;
-  z-index: 1;
-  display: flex;
-  gap: 6px;
-  align-items: center;
-}
-
-.chunk-card__action {
-  width: 34px;
-  height: 34px;
-  color: var(--el-color-primary);
-  background: var(--el-color-primary-light-9);
-  background: color-mix(in srgb, var(--el-color-primary-light-9) 66%, white);
-  border: 1px solid var(--el-color-primary-light-8);
-  border: 1px solid
-    color-mix(in srgb, var(--el-color-primary-light-8) 72%, white);
-  box-shadow: 0 8px 18px rgb(37 99 235 / 10%);
-}
-
-.chunk-card__action--ghost {
-  color: var(--el-text-color-secondary);
-  background: rgb(255 255 255 / 86%);
-  border-color: var(--el-border-color-light);
-  border-color: color-mix(in srgb, var(--el-border-color-light) 86%, white);
-  box-shadow: none;
-}
-
-.chunk-card__header {
-  display: flex;
-  flex-direction: column;
+.chunk-table-root,
+.chunk-content-cell {
   min-width: 0;
-  padding-right: 92px;
 }
 
-.chunk-card__eyebrow {
-  display: inline-flex;
-  gap: 8px;
+.chunk-list {
+  display: grid;
+  gap: var(--space-3);
+}
+
+.chunk-item {
+  min-width: 0;
+  padding: var(--space-4);
+  background: hsl(var(--surface-panel));
+  border: 1px solid hsl(var(--line-subtle));
+  border-radius: var(--radius-toolbar);
+}
+
+.chunk-item__header,
+.inline-editor__toolbar,
+.chunk-actions,
+.inline-editor__modes,
+.inline-editor__actions {
+  display: flex;
   align-items: center;
-  min-height: 28px;
+}
+
+.chunk-item__header,
+.inline-editor__toolbar {
+  justify-content: space-between;
+}
+
+.chunk-item__header {
+  gap: var(--space-3);
+  min-height: 32px;
+  margin-bottom: var(--space-2);
   font-size: 12px;
   font-weight: 600;
-  line-height: 1.5;
-  color: var(--el-text-color-secondary);
+  color: hsl(var(--text-muted));
 }
 
-.chunk-card__eyebrow-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 999px;
-  background: var(--el-color-primary);
-  box-shadow: 0 0 0 4px var(--el-color-primary-light-9);
-  box-shadow: 0 0 0 4px
-    color-mix(in srgb, var(--el-color-primary-light-8) 50%, transparent);
+.chunk-actions,
+.inline-editor__modes,
+.inline-editor__actions {
+  gap: var(--space-1);
 }
 
-.chunk-card__content {
-  padding-top: 14px;
+.chunk-sync-status {
+  display: inline-grid;
+  flex: 0 0 24px;
+  width: 24px;
+  height: 24px;
+  place-items: center;
+}
+
+.chunk-sync-status__pending {
+  font-size: 16px;
+  color: hsl(var(--text-muted));
+}
+
+.chunk-sync-status__success {
+  font-size: 16px;
+  color: var(--el-color-success);
+  transform-origin: center;
+  animation-name: chunk-sync-success;
+  animation-duration: var(--chunk-sync-success-duration);
+  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
+  animation-fill-mode: both;
+}
+
+.chunk-sync-status__retry {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+}
+
+@keyframes chunk-sync-success {
+  0% {
+    opacity: 0;
+    transform: scale(0.76);
+  }
+  12%,
+  82% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.92);
+  }
+}
+
+.inline-editor {
+  min-width: 0;
+  background: transparent;
+}
+
+.inline-editor__toolbar {
+  flex-wrap: wrap;
+  gap: var(--space-1) var(--space-3);
+  min-height: 32px;
+  padding-bottom: var(--space-1);
+}
+
+.inline-editor__surface {
+  min-height: 0;
+}
+
+.inline-editor.is-source-mode {
+  overflow: hidden;
+  background: hsl(var(--surface-panel));
+  border: 1px solid hsl(var(--line-subtle));
+  border-radius: var(--radius-control);
+}
+
+.inline-editor.is-source-mode .inline-editor__toolbar {
+  min-height: 44px;
+  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
+  border-bottom: 1px solid hsl(var(--line-subtle));
+}
+
+.inline-editor.is-source-mode .inline-editor__surface {
+  height: min(52vh, 520px);
+  min-height: 300px;
+}
+
+.inline-editor.is-source-mode .inline-editor__surface > * {
+  height: 100%;
+}
+
+.inline-editor.is-source-mode .inline-editor__surface :deep(.cm-activeLine),
+.inline-editor.is-source-mode
+  .inline-editor__surface
+  :deep(.cm-activeLineGutter) {
+  background-color: transparent;
+}
+
+.inline-editor.is-source-mode
+  .inline-editor__surface
+  :deep(.cm-selectionBackground) {
+  background-color: hsl(var(--text-muted) / 38%) !important;
+}
+
+.chunk-rich-content,
+.inline-editor.is-live-mode .inline-editor__surface {
+  min-width: 0;
+  font-size: 14px;
+  line-height: 1.72;
+  color: hsl(var(--foreground));
 }
 
 .chunk-rich-content {
-  min-width: 0;
-  padding: 4px 0;
-  font-size: 14px;
-  line-height: 1.72;
-  color: var(--el-text-color-regular);
-}
-
-.chunk-rich-content--card {
-  padding: 14px 16px;
+  padding-block: var(--space-1);
   overflow-x: auto;
-  background: rgb(255 255 255 / 82%);
-  border: 1px solid rgb(15 23 42 / 6%);
-  border-radius: 16px;
 }
 
 .chunk-rich-content :deep(.markdown-body) {
@@ -468,152 +1205,119 @@ const getChunkHeaderLabel = (row: any) => {
   background: transparent;
 }
 
-.chunk-rich-content :deep(.markdown-body > :first-child) {
-  margin-top: 0;
-}
-
-.chunk-rich-content :deep(.markdown-body > :last-child) {
-  margin-bottom: 0;
-}
-
-.chunk-rich-content :deep(*) {
-  overflow-wrap: anywhere;
-}
-
-.chunk-rich-content :deep(p) {
-  margin: 0 0 10px;
-}
-
-.chunk-rich-content :deep(p:last-child) {
-  margin-bottom: 0;
-}
-
 .chunk-rich-content :deep(h1),
 .chunk-rich-content :deep(h2),
 .chunk-rich-content :deep(h3),
 .chunk-rich-content :deep(h4),
 .chunk-rich-content :deep(h5),
 .chunk-rich-content :deep(h6) {
-  margin: 14px 0 10px;
-  font-weight: 600;
-  line-height: 1.45;
-  color: var(--el-text-color-primary);
+  color: hsl(var(--text-strong));
 }
 
-.chunk-rich-content :deep(h1:first-child),
-.chunk-rich-content :deep(h2:first-child),
-.chunk-rich-content :deep(h3:first-child),
-.chunk-rich-content :deep(h4:first-child),
-.chunk-rich-content :deep(h5:first-child),
-.chunk-rich-content :deep(h6:first-child) {
+.chunk-rich-content :deep(.markdown-body > :first-child) {
   margin-top: 0;
 }
-
-.chunk-rich-content :deep(ul),
-.chunk-rich-content :deep(ol) {
-  padding-left: 20px;
-  margin: 0 0 12px;
+.chunk-rich-content :deep(.markdown-body > :last-child) {
+  margin-bottom: 0;
 }
-
-.chunk-rich-content :deep(li + li) {
-  margin-top: 4px;
+.chunk-rich-content :deep(*) {
+  overflow-wrap: anywhere;
 }
-
-.chunk-rich-content :deep(a) {
-  color: var(--el-color-primary);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-
-.chunk-rich-content :deep(img) {
-  display: block;
-  max-width: min(100%, 560px);
-  height: auto;
-  margin: 12px 0;
-  border: 1px solid rgb(15 23 42 / 8%);
-  border-radius: 12px;
-  box-shadow: 0 10px 24px rgb(15 23 42 / 8%);
-}
-
 .chunk-rich-content :deep(table) {
-  width: 100%;
-  margin: 12px 0;
-  overflow: hidden;
+  width: max-content;
+  min-width: 100%;
+  color: inherit;
   border-collapse: collapse;
-  background: rgb(255 255 255 / 92%);
-  border: 1px solid rgb(15 23 42 / 8%);
-  border-radius: 12px;
+  background: transparent;
+}
+
+.chunk-rich-content :deep(table tr),
+.chunk-rich-content :deep(table tr:nth-child(2n)) {
+  background: transparent;
 }
 
 .chunk-rich-content :deep(th),
 .chunk-rich-content :deep(td) {
-  padding: 10px 12px;
+  padding: var(--space-2) var(--space-3);
+  min-width: 8rem;
+  color: hsl(var(--foreground));
   text-align: left;
-  vertical-align: top;
-  border: 1px solid rgb(15 23 42 / 8%);
+  overflow-wrap: normal;
+  word-break: normal;
+  background: transparent;
+  border: 1px solid hsl(var(--line-subtle));
 }
 
 .chunk-rich-content :deep(th) {
-  font-weight: 600;
-  color: var(--el-text-color-primary);
-  background: rgb(37 99 235 / 4%);
+  color: hsl(var(--text-strong));
+  background: hsl(var(--surface-subtle));
+}
+
+.chunk-data-table :deep(.el-table__body .cell) {
+  overflow: visible;
+}
+
+.chunk-data-table :deep(.el-table__body tr),
+.chunk-data-table :deep(.el-table__body td) {
+  color: hsl(var(--foreground));
+  background: hsl(var(--surface-panel));
+}
+
+.chunk-rich-content :deep(.elx-xmarkdown-container),
+.chunk-rich-content :deep(.elx-xmarkdown-provider),
+.chunk-rich-content :deep(.elx-xmarkdown-provider > div),
+.chunk-rich-content :deep(p),
+.chunk-rich-content :deep(li) {
+  color: inherit;
+  background: transparent;
 }
 
 .chunk-rich-content :deep(pre) {
   max-width: 100%;
-  padding: 12px 14px;
+  padding: var(--space-3);
   overflow: auto;
-  background: rgb(15 23 42 / 4%);
-  border: 1px solid rgb(15 23 42 / 6%);
-  border-radius: 12px;
+  background: hsl(var(--surface-subtle));
+  border-radius: var(--radius-control);
 }
 
-.chunk-rich-content :deep(blockquote) {
-  padding-left: 12px;
-  margin: 12px 0;
-  color: var(--el-text-color-secondary);
-  border-left: 3px solid rgb(37 99 235 / 24%);
+.chunk-rich-content :deep(img) {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin-block: var(--space-3);
+  border-radius: var(--radius-control);
 }
 
-.chunk-table__empty {
-  color: var(--el-text-color-placeholder);
+.chunk-empty {
+  color: hsl(var(--text-muted));
 }
 
-@media (max-width: 960px) {
-  .chunk-card {
-    padding: 18px 16px 16px;
+@media (max-width: 768px) {
+  .chunk-item {
+    padding: var(--space-3);
   }
-
-  .chunk-card__toolbar {
-    position: static;
-    justify-content: flex-end;
-    padding-bottom: 12px;
+  .chunk-item__header {
+    align-items: flex-start;
   }
-
-  .chunk-card__header {
-    padding-right: 0;
-  }
-
-  .chunk-rich-content--card {
-    padding: 12px;
-  }
-
-  .chunk-card__eyebrow {
-    font-size: 12px;
+  .inline-editor.is-source-mode .inline-editor__surface {
+    height: 50vh;
+    min-height: 260px;
   }
 }
 
-@supports not (color: color-mix(in srgb, red, blue)) {
-  .chunk-card {
-    border-color: var(--el-border-color-light);
+@media (prefers-reduced-motion: reduce) {
+  .chunk-sync-status__success {
+    animation-name: chunk-sync-success-reduced;
   }
+}
 
-  .chunk-card__action {
-    border-color: var(--el-color-primary-light-8);
+@keyframes chunk-sync-success-reduced {
+  0%,
+  82% {
+    opacity: 1;
   }
-
-  .chunk-card__action--ghost {
-    border-color: var(--el-border-color-light);
+  100% {
+    opacity: 0;
   }
 }
 </style>
diff --git a/easyflow-ui-admin/app/src/views/ai/documentCollection/Document.vue b/easyflow-ui-admin/app/src/views/ai/documentCollection/Document.vue
index 34b720b7..4e174dd7 100644
--- a/easyflow-ui-admin/app/src/views/ai/documentCollection/Document.vue
+++ b/easyflow-ui-admin/app/src/views/ai/documentCollection/Document.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, defineAsyncComponent, nextTick, onMounted, ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router';
 
 import { useAccess } from '@easyflow/access';
 import { $t } from '@easyflow/locales';
@@ -71,9 +71,12 @@ const knowledgeId = ref<string>((route.query.id as string) || '');
 const activeMenu = ref<string>((route.query.activeMenu as string) || '');
 const knowledgeInfo = ref<any>({});
 const selectedCategory = ref('');
-const canManageKnowledgePermission = computed(() =>
+const canUpdateKnowledgePermission = computed(() =>
   hasAccessByCodes(['/api/v1/documentCollection/save']),
 );
+const canDeleteKnowledgePermission = computed(() =>
+  hasAccessByCodes(['/api/v1/documentCollection/remove']),
+);
 
 const isSuperAdmin = computed(() => {
   return (
@@ -82,16 +85,23 @@ const isSuperAdmin = computed(() => {
   );
 });
 
-const canManageCurrentKnowledge = computed(() => {
-  if (!knowledgeInfo.value?.id || !canManageKnowledgePermission.value) {
-    return false;
-  }
+const isCurrentKnowledgeOwner = computed(() => {
+  if (!knowledgeInfo.value?.id) return false;
   return (
     isSuperAdmin.value ||
     String(userStore.userInfo?.id || '') ===
       String(knowledgeInfo.value.createdBy || '')
   );
 });
+const canManageCurrentKnowledge = computed(
+  () => canUpdateKnowledgePermission.value && isCurrentKnowledgeOwner.value,
+);
+const canDeleteCurrentKnowledge = computed(
+  () => canDeleteKnowledgePermission.value && isCurrentKnowledgeOwner.value,
+);
+const canOperateCurrentKnowledge = computed(
+  () => canManageCurrentKnowledge.value || canDeleteCurrentKnowledge.value,
+);
 
 const syncNavTitle = (title: string) => {
   if (!title) {
@@ -152,6 +162,9 @@ onMounted(() => {
   getKnowledge();
 });
 const back = async () => {
+  if (!(await canLeaveChunk())) {
+    return;
+  }
   await navigateBackToList(
     router,
     route.query,
@@ -195,6 +208,7 @@ const headerButtons = [
 ];
 const panelMode = ref<'chunk' | 'list' | 'process'>('list');
 const documentTableRef = ref();
+const chunkDocumentTableRef = ref();
 const batchStatusRefreshKey = ref(0);
 const documentTitle = ref('');
 const handleSearch = (searchParams: string) => {
@@ -213,7 +227,14 @@ const handleButtonClick = (event: any) => {
     }
   }
 };
-const handleCategoryClick = (menuKey: string) => {
+const canLeaveChunk = async () =>
+  panelMode.value !== 'chunk' ||
+  (await chunkDocumentTableRef.value?.confirmLeave?.()) !== false;
+
+const handleCategoryClick = async (menuKey: string) => {
+  if (!(await canLeaveChunk())) {
+    return;
+  }
   selectedCategory.value = menuKey;
   panelMode.value = 'list';
 };
@@ -229,6 +250,9 @@ const continueProcess = (doc: any) => {
   documentTitle.value = doc?.title || '';
 };
 const backDoc = async () => {
+  if (!(await canLeaveChunk())) {
+    return;
+  }
   if (panelMode.value !== 'list') {
     panelMode.value = 'list';
   }
@@ -237,6 +261,8 @@ const backDoc = async () => {
   documentTableRef.value?.reload?.();
   batchStatusRefreshKey.value += 1;
 };
+
+onBeforeRouteLeave(() => canLeaveChunk());
 </script>
 
 <template>
@@ -254,7 +280,7 @@ const backDoc = async () => {
           <div class="description">
             {{ knowledgeInfo.description || '' }}
           </div>
-          <div v-if="!canManageCurrentKnowledge" class="permission-tip">
+          <div v-if="!canOperateCurrentKnowledge" class="permission-tip">
             {{ $t('documentCollection.managePermissionHint') }}
           </div>
         </div>
@@ -304,7 +330,7 @@ const backDoc = async () => {
               :knowledge-id="knowledgeId"
               :permissions="{
                 canCreateContent: canManageCurrentKnowledge,
-                canDeleteContent: canManageCurrentKnowledge,
+                canDeleteContent: canDeleteCurrentKnowledge,
                 canDownloadContent: true,
               }"
               @continue-process="continueProcess"
@@ -313,8 +339,11 @@ const backDoc = async () => {
 
             <ChunkDocumentTable
               v-else-if="panelMode === 'chunk'"
+              ref="chunkDocumentTableRef"
               :document-id="documentId"
               :manageable="canManageCurrentKnowledge"
+              :editable="canManageCurrentKnowledge"
+              :deletable="canDeleteCurrentKnowledge"
               :default-summary-prompt="knowledgeInfo.summaryPrompt"
             />
             <SegmenterDoc
@@ -389,7 +418,7 @@ const backDoc = async () => {
   flex: 1;
   width: 100%;
   padding: 20px 14px 0;
-  background-color: var(--el-bg-color);
+  background-color: hsl(var(--surface-panel));
   border-radius: 8px;
 }
 
@@ -472,7 +501,7 @@ const backDoc = async () => {
 }
 
 .doc-table {
-  background-color: var(--el-bg-color);
+  background-color: hsl(var(--surface-panel));
 }
 
 .doc-sub-back {
diff --git a/easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentTable.test.ts b/easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentTable.test.ts
new file mode 100644
index 00000000..1045ecdc
--- /dev/null
+++ b/easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentTable.test.ts
@@ -0,0 +1,348 @@
+import { flushPromises, mount } from '@vue/test-utils';
+
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import DocumentTable from './DocumentTable.vue';
+
+const sseMocks = vi.hoisted(() => ({
+  abort: vi.fn(),
+  post: vi.fn().mockResolvedValue(undefined),
+}));
+const tableState = vi.hoisted(() => ({ rows: [] as any[] }));
+
+vi.mock('element-plus', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('element-plus')>();
+  const { defineComponent, h } = await import('vue');
+  const ElTable = defineComponent({
+    name: 'ElTable',
+    props: ['data'],
+    emits: ['selection-change'],
+    setup(props, { expose, slots }) {
+      expose({
+        clearSelection: vi.fn(),
+        toggleRowSelection: vi.fn(),
+      });
+      return () => {
+        tableState.rows = props.data || [];
+        return h('div', { class: 'table-stub' }, slots.default?.());
+      };
+    },
+  });
+  const ElTableColumn = defineComponent({
+    name: 'ElTableColumn',
+    props: ['label', 'reserveSelection', 'selectable', 'type'],
+    setup(_props, { slots }) {
+      return () =>
+        h(
+          'div',
+          { class: 'table-column-stub' },
+          tableState.rows.map((row) => slots.default?.({ row })),
+        );
+    },
+  });
+  return { ...actual, ElTable, ElTableColumn };
+});
+
+vi.mock('#/api/request', () => ({
+  api: {},
+  SseClient: class {
+    abort = sseMocks.abort;
+    post = sseMocks.post;
+  },
+}));
+
+vi.mock('@easyflow/locales', () => ({
+  $t: (key: string, params?: Record<string, number>) =>
+    params ? `${key}:${JSON.stringify(params)}` : key,
+}));
+
+const rows = [
+  { id: '1', processStatus: 'COMPLETED', title: '一.docx' },
+  { id: '2', processStatus: 'PARSING', title: '处理中.docx' },
+  { id: '3', processStatus: 'COMPLETED', title: '三.pdf' },
+  { id: '4', processStatus: 'PARSE_FAILED', title: '四.xlsx' },
+  { id: '5', processStatus: 'COMPLETED', title: '五.docx' },
+  { id: '6', processStatus: 'COMPLETED', title: '六.pdf' },
+  { id: '7', processStatus: 'COMPLETED', title: '七.xlsx' },
+];
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.clearAllMocks();
+});
+
+describe('documentTable', () => {
+  it('处理中行不可选，批量删除使用最多三个并发并汇总部分失败', async () => {
+    let active = 0;
+    let maxActive = 0;
+    const post = vi.fn().mockImplementation(async (_url: string, body: any) => {
+      active += 1;
+      maxActive = Math.max(maxActive, active);
+      await new Promise((resolve) => setTimeout(resolve, 5));
+      active -= 1;
+      return body.id === '4' || body.id === '6'
+        ? { data: false, errorCode: 0, message: '失败' }
+        : { data: true, errorCode: 0 };
+    });
+    const get = vi.fn().mockResolvedValue({
+      data: { records: rows, totalRow: rows.length },
+    });
+    vi.spyOn(ElMessageBox, 'confirm').mockResolvedValue('confirm' as never);
+
+    const wrapper = mount(DocumentTable, {
+      global: { directives: { loading: {} } },
+      props: {
+        knowledgeId: '10',
+        requestClient: { download: vi.fn(), get, post },
+      },
+    });
+    await flushPromises();
+    const warning = vi.spyOn(ElMessage, 'warning');
+
+    const table = wrapper.findComponent({ name: 'ElTable' });
+    const selectionColumn = table
+      .findAllComponents({ name: 'ElTableColumn' })
+      .find((column) => column.props('type') === 'selection');
+    expect(selectionColumn?.props('selectable')(rows[0])).toBe(true);
+    expect(selectionColumn?.props('selectable')(rows[1])).toBe(false);
+    expect(selectionColumn?.props('reserveSelection')).toBe(true);
+
+    table.vm.$emit('selection-change', [
+      rows[0],
+      rows[2],
+      rows[3],
+      rows[4],
+      rows[5],
+      rows[6],
+    ]);
+    await wrapper.vm.$nextTick();
+    const deleteButton = wrapper
+      .findAll('.batch-toolbar button')
+      .find((button) =>
+        button.text().includes('documentCollection.batchDelete'),
+      );
+    if (!deleteButton) throw new Error('未找到批量删除按钮');
+    await deleteButton.trigger('click');
+    await new Promise((resolve) => setTimeout(resolve, 30));
+    await flushPromises();
+
+    expect(post).toHaveBeenCalledTimes(6);
+    expect(maxActive).toBe(3);
+    expect(maxActive).toBeLessThanOrEqual(3);
+    expect(warning).toHaveBeenCalledWith(
+      'documentCollection.batchDeletePartial:{"failed":2,"success":4}',
+    );
+    expect(wrapper.find('.batch-toolbar').text()).toContain(
+      'documentCollection.selectedCount:{"count":2}',
+    );
+    wrapper.unmount();
+  });
+
+  it('批量删除确认期间阻止重复确认和重复请求', async () => {
+    let resolveConfirm!: (value: unknown) => void;
+    const confirm = vi.spyOn(ElMessageBox, 'confirm').mockReturnValue(
+      new Promise((resolve) => {
+        resolveConfirm = resolve;
+      }) as never,
+    );
+    const post = vi.fn().mockResolvedValue({ data: true, errorCode: 0 });
+    const get = vi.fn().mockResolvedValue({
+      data: { records: rows, totalRow: rows.length },
+    });
+    const wrapper = mount(DocumentTable, {
+      global: { directives: { loading: {} } },
+      props: {
+        knowledgeId: '10',
+        requestClient: { download: vi.fn(), get, post },
+      },
+    });
+    await flushPromises();
+
+    wrapper
+      .findComponent({ name: 'ElTable' })
+      .vm.$emit('selection-change', [rows[0], rows[2]]);
+    await wrapper.vm.$nextTick();
+    const deleteButton = wrapper
+      .findAll('.batch-toolbar button')
+      .find((button) =>
+        button.text().includes('documentCollection.batchDelete'),
+      );
+    if (!deleteButton) throw new Error('未找到批量删除按钮');
+    await deleteButton.trigger('click');
+    await deleteButton.trigger('click');
+
+    expect(confirm).toHaveBeenCalledTimes(1);
+    expect(post).not.toHaveBeenCalled();
+
+    resolveConfirm('confirm');
+    await flushPromises();
+    expect(post).toHaveBeenCalledTimes(2);
+    wrapper.unmount();
+  });
+
+  it('搜索和显式重载会清空当前页选择', async () => {
+    const get = vi.fn().mockResolvedValue({
+      data: { records: rows, totalRow: rows.length },
+    });
+    const wrapper = mount(DocumentTable, {
+      global: { directives: { loading: {} } },
+      props: {
+        knowledgeId: '10',
+        requestClient: { download: vi.fn(), get, post: vi.fn() },
+      },
+    });
+    await flushPromises();
+
+    const table = wrapper.findComponent({ name: 'ElTable' });
+    table.vm.$emit('selection-change', [rows[0]]);
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find('.batch-toolbar').exists()).toBe(true);
+
+    wrapper.vm.search('关键字');
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find('.batch-toolbar').exists()).toBe(false);
+
+    table.vm.$emit('selection-change', [rows[2]]);
+    await wrapper.vm.$nextTick();
+    wrapper.vm.reload();
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find('.batch-toolbar').exists()).toBe(false);
+    wrapper.unmount();
+  });
+
+  it('后台状态更新只移除转为处理中的已选文档', async () => {
+    const get = vi.fn().mockResolvedValue({
+      data: { records: rows, totalRow: rows.length },
+    });
+    const wrapper = mount(DocumentTable, {
+      global: { directives: { loading: {} } },
+      props: {
+        knowledgeId: '10',
+        requestClient: { download: vi.fn(), get, post: vi.fn() },
+      },
+    });
+    await flushPromises();
+
+    const table = wrapper.findComponent({ name: 'ElTable' });
+    table.vm.$emit('selection-change', [rows[0], rows[2]]);
+    await wrapper.vm.$nextTick();
+    const streamOptions = sseMocks.post.mock.calls.at(-1)?.[2];
+    streamOptions?.onMessage?.({
+      data: JSON.stringify({
+        documentId: String(rows[1]?.id || ''),
+        knowledgeId: '10',
+        processStatus: 'PARSING',
+        type: 'document-status',
+      }),
+      event: 'document-status',
+    });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find('.batch-toolbar').text()).toContain(
+      'documentCollection.selectedCount:{"count":2}',
+    );
+
+    streamOptions?.onMessage?.({
+      data: JSON.stringify({
+        documentId: String(rows[2]?.id || ''),
+        knowledgeId: '10',
+        processStatus: 'INDEXING',
+        type: 'document-status',
+      }),
+      event: 'document-status',
+    });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find('.batch-toolbar').text()).toContain(
+      'documentCollection.selectedCount:{"count":1}',
+    );
+    wrapper.unmount();
+  });
+
+  it('后台静默重载按 ID 保留当前页有效选择', async () => {
+    const get = vi.fn().mockResolvedValue({
+      data: { records: rows, totalRow: rows.length },
+    });
+    const wrapper = mount(DocumentTable, {
+      global: { directives: { loading: {} } },
+      props: {
+        knowledgeId: '10',
+        requestClient: { download: vi.fn(), get, post: vi.fn() },
+      },
+    });
+    await flushPromises();
+
+    const table = wrapper.findComponent({ name: 'ElTable' });
+    table.vm.$emit('selection-change', [rows[0]]);
+    await wrapper.vm.$nextTick();
+    const pageData = wrapper.findComponent({ name: 'PageData' });
+    await (pageData.vm as any).reload({ silent: true });
+    await flushPromises();
+
+    expect(wrapper.find('.batch-toolbar').text()).toContain(
+      'documentCollection.selectedCount:{"count":1}',
+    );
+    wrapper.unmount();
+  });
+
+  it('单条删除请求期间锁定行操作并阻止重复提交', async () => {
+    let resolveDelete!: (value: unknown) => void;
+    const post = vi.fn().mockReturnValue(
+      new Promise((resolve) => {
+        resolveDelete = resolve;
+      }),
+    );
+    const get = vi.fn().mockResolvedValue({
+      data: { records: rows, totalRow: rows.length },
+    });
+    const confirm = vi
+      .spyOn(ElMessageBox, 'confirm')
+      .mockResolvedValue('confirm' as never);
+    const wrapper = mount(DocumentTable, {
+      global: { directives: { loading: {} } },
+      props: {
+        knowledgeId: '10',
+        requestClient: { download: vi.fn(), get, post },
+      },
+    });
+    await flushPromises();
+
+    const deleteButton = wrapper.get('button[aria-label="button.delete"]');
+    await deleteButton.trigger('click');
+    await deleteButton.trigger('click');
+    await flushPromises();
+
+    expect(confirm).toHaveBeenCalledTimes(1);
+    expect(post).toHaveBeenCalledTimes(1);
+    expect(
+      wrapper.get('button[aria-label="button.delete"]').attributes(),
+    ).toHaveProperty('disabled');
+
+    resolveDelete({ data: true, errorCode: 0 });
+    await flushPromises();
+    wrapper.unmount();
+  });
+
+  it('只读权限不渲染选择列和批量入口', async () => {
+    const get = vi.fn().mockResolvedValue({
+      data: { records: rows, totalRow: rows.length },
+    });
+    const wrapper = mount(DocumentTable, {
+      global: { directives: { loading: {} } },
+      props: {
+        knowledgeId: '10',
+        permissions: { canDeleteContent: false },
+        requestClient: { download: vi.fn(), get, post: vi.fn() },
+      },
+    });
+    await flushPromises();
+
+    const columns = wrapper
+      .findComponent({ name: 'ElTable' })
+      .findAllComponents({ name: 'ElTableColumn' });
+    expect(columns.some((column) => column.props('type') === 'selection')).toBe(
+      false,
+    );
+    expect(wrapper.find('.batch-toolbar').exists()).toBe(false);
+    wrapper.unmount();
+  });
+});
diff --git a/easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentTable.vue b/easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentTable.vue
index 0541708e..838f56fd 100644
--- a/easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentTable.vue
+++ b/easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentTable.vue
@@ -57,6 +57,10 @@ interface DocumentTablePermissions {
   canDownloadContent?: boolean;
 }
 
+interface PageDataLoadEvent {
+  silent?: boolean;
+}
+
 type PermissionKey = keyof DocumentTablePermissions;
 
 const props = defineProps({
@@ -88,7 +92,12 @@ const STREAM_RECONNECT_DELAY = 1500;
 const STREAM_RELOAD_DELAY = 3000;
 
 const pageDataRef = ref();
+const tableRef = ref();
 const retryingDocumentIds = ref<Set<string>>(new Set());
+const selectedRows = ref<any[]>([]);
+const batchDeleting = ref(false);
+const batchDeletingIds = ref<Set<string>>(new Set());
+const deletingDocumentIds = ref<Set<string>>(new Set());
 const taskStatusStreamClient = new SseClient();
 let reconnectTimer: null | ReturnType<typeof setTimeout> = null;
 let reloadTimer: null | ReturnType<typeof setTimeout> = null;
@@ -96,9 +105,13 @@ let disposed = false;
 
 defineExpose({
   reload() {
+    if (batchDeleting.value) return;
+    clearSelection();
     pageDataRef.value?.reload?.();
   },
   search(searchText: string) {
+    if (batchDeleting.value) return;
+    clearSelection();
     pageDataRef.value?.setQuery?.({
       keyword: searchText.trim() || undefined,
     });
@@ -106,6 +119,7 @@ defineExpose({
 });
 
 const processingStatuses = new Set(['INDEXING', 'PARSING', 'SPLITTING']);
+const BATCH_DELETE_CONCURRENCY = 3;
 
 const isProcessingStatus = (status?: string) =>
   processingStatuses.has(status || '');
@@ -277,9 +291,12 @@ const patchDocumentRow = (payload: DocumentStatusPayload) => {
   if (payload.taskModifiedAt) {
     nextPatch.modified = payload.taskModifiedAt;
   }
-  return (
-    pageDataRef.value?.patchRowById?.(payload.documentId, nextPatch) ?? false
-  );
+  const patched =
+    pageDataRef.value?.patchRowById?.(payload.documentId, nextPatch) ?? false;
+  if (patched && isProcessingStatus(payload.processStatus)) {
+    reconcileSelection();
+  }
+  return patched;
 };
 
 const buildTaskStreamUrl = () => {
@@ -432,28 +449,203 @@ const handleDownload = async (row: any) => {
   });
 };
 
-const handleDelete = (row: any) => {
-  if (!ensurePermission('canDeleteContent')) {
+const removeDocument = async (row: any) => {
+  const res = await props.requestClient.post(
+    buildKnowledgePath(props.endpointPrefix, '/api/v1/document/removeDoc'),
+    { id: row.id },
+  );
+  if (res.errorCode !== 0 || res.data === false) {
+    throw new Error(res.message || $t('message.deleteErrorMessage'));
+  }
+};
+
+const clearSelection = (force = false) => {
+  if (batchDeleting.value && !force) return;
+  selectedRows.value = [];
+  tableRef.value?.clearSelection?.();
+};
+
+const reconcileSelection = () => {
+  if (batchDeleting.value || selectedRows.value.length === 0) return;
+  const selectedIds = new Set(selectedRows.value.map((row) => String(row.id)));
+  const currentRows = pageDataRef.value?.getPageRows?.() || [];
+  const nextRows = currentRows.filter(
+    (row: any) =>
+      selectedIds.has(String(row.id)) && !isProcessingStatus(row.processStatus),
+  );
+  tableRef.value?.clearSelection?.();
+  nextRows.forEach((row: any) =>
+    tableRef.value?.toggleRowSelection?.(row, true),
+  );
+  selectedRows.value = nextRows;
+};
+
+const handleSelectionChange = (rows: any[]) => {
+  if (batchDeleting.value) return;
+  selectedRows.value = rows;
+};
+
+const handleListLoaded = (event?: PageDataLoadEvent) => {
+  if (batchDeleting.value) return;
+  if (event?.silent) {
+    reconcileSelection();
+    return;
+  }
+  clearSelection();
+};
+
+const isRowSelectable = (row: any) =>
+  !batchDeleting.value &&
+  !deletingDocumentIds.value.has(String(row.id)) &&
+  !isProcessingStatus(row.processStatus);
+const isBatchLocked = (row: any) =>
+  batchDeleting.value && batchDeletingIds.value.has(String(row.id));
+const isDocumentDeleting = (row: any) =>
+  deletingDocumentIds.value.has(String(row.id));
+
+const setDocumentDeleting = (row: any, deleting: boolean) => {
+  const next = new Set(deletingDocumentIds.value);
+  const id = String(row.id);
+  if (deleting) next.add(id);
+  else next.delete(id);
+  deletingDocumentIds.value = next;
+};
+
+const handleDelete = async (row: any) => {
+  if (
+    batchDeleting.value ||
+    isDocumentDeleting(row) ||
+    !ensurePermission('canDeleteContent')
+  ) {
     return;
   }
   if (processingStatuses.has(row.processStatus)) {
     ElMessage.warning($t('documentCollection.processingDeleteBlocked'));
     return;
   }
-  ElMessageBox.confirm($t('message.deleteAlert'), $t('message.noticeTitle'), {
-    confirmButtonText: $t('button.confirm'),
-    cancelButtonText: $t('button.cancel'),
-    type: 'warning',
-  }).then(async () => {
-    const res = await props.requestClient.post(
-      buildKnowledgePath(props.endpointPrefix, '/api/v1/document/removeDoc'),
-      { id: row.id },
+  setDocumentDeleting(row, true);
+  try {
+    await ElMessageBox.confirm(
+      $t('message.deleteAlert'),
+      $t('message.noticeTitle'),
+      {
+        confirmButtonText: $t('button.confirm'),
+        cancelButtonText: $t('button.cancel'),
+        type: 'warning',
+      },
     );
-    if (res.errorCode === 0) {
-      ElMessage.success($t('message.deleteOkMessage'));
-      pageDataRef.value?.reload?.();
+  } catch {
+    setDocumentDeleting(row, false);
+    return;
+  }
+  try {
+    await removeDocument(row);
+    ElMessage.success($t('message.deleteOkMessage'));
+    clearSelection();
+    pageDataRef.value?.reload?.();
+  } catch (error) {
+    ElMessage.error(
+      error instanceof Error ? error.message : $t('message.deleteErrorMessage'),
+    );
+  } finally {
+    setDocumentDeleting(row, false);
+  }
+};
+
+const runBatchDelete = async (rows: any[]) => {
+  const queue = [...rows];
+  const failedIds = new Set<string>();
+  let successCount = 0;
+  let failureCount = 0;
+  const worker = async () => {
+    while (queue.length > 0) {
+      const row = queue.shift();
+      if (!row) {
+        return;
+      }
+      try {
+        await removeDocument(row);
+        successCount += 1;
+      } catch {
+        failureCount += 1;
+        failedIds.add(String(row.id));
+      }
     }
-  });
+  };
+  await Promise.all(
+    Array.from(
+      {
+        length: Math.min(BATCH_DELETE_CONCURRENCY, rows.length),
+      },
+      () => worker(),
+    ),
+  );
+  return { failedIds, failureCount, successCount };
+};
+
+const restoreFailedSelection = (failedIds: Set<string>) => {
+  const currentRows = pageDataRef.value?.getPageRows?.() || [];
+  const failedRows = currentRows.filter((row: any) =>
+    failedIds.has(String(row.id)),
+  );
+  tableRef.value?.clearSelection?.();
+  failedRows.forEach((row: any) =>
+    tableRef.value?.toggleRowSelection?.(row, true),
+  );
+  selectedRows.value = failedRows;
+};
+
+const handleBatchDelete = async () => {
+  if (
+    batchDeleting.value ||
+    deletingDocumentIds.value.size > 0 ||
+    !ensurePermission('canDeleteContent') ||
+    selectedRows.value.length === 0
+  ) {
+    return;
+  }
+  const rows = selectedRows.value.filter((row) => isRowSelectable(row));
+  if (rows.length === 0) {
+    clearSelection();
+    return;
+  }
+  batchDeleting.value = true;
+  batchDeletingIds.value = new Set(rows.map((row) => String(row.id)));
+  try {
+    try {
+      await ElMessageBox.confirm(
+        $t('documentCollection.batchDeleteConfirm', { count: rows.length }),
+        $t('message.noticeTitle'),
+        {
+          confirmButtonText: $t('button.confirm'),
+          cancelButtonText: $t('button.cancel'),
+          type: 'warning',
+        },
+      );
+    } catch {
+      return;
+    }
+    const result = await runBatchDelete(rows);
+    if (result.failureCount === 0) {
+      ElMessage.success(
+        $t('documentCollection.batchDeleteSuccess', {
+          count: result.successCount,
+        }),
+      );
+    } else {
+      ElMessage.warning(
+        $t('documentCollection.batchDeletePartial', {
+          failed: result.failureCount,
+          success: result.successCount,
+        }),
+      );
+    }
+    await pageDataRef.value?.reload?.();
+    restoreFailedSelection(result.failedIds);
+  } finally {
+    batchDeletingIds.value = new Set();
+    batchDeleting.value = false;
+  }
 };
 
 const primaryActionConfigs: Record<
@@ -507,6 +699,7 @@ const getPrimaryActionLabel = (row: any) => {
 };
 
 const handlePrimaryAction = (row: any) => {
+  if (isBatchLocked(row)) return;
   const config = primaryActionConfigs[row.processStatus || ''];
   if (!config) {
     return;
@@ -532,6 +725,7 @@ onBeforeUnmount(() => {
 watch(
   () => `${props.endpointPrefix}:${props.knowledgeId}`,
   () => {
+    clearSelection();
     if (disposed) {
       return;
     }
@@ -554,9 +748,46 @@ watch(
       sort: 'desc',
       sortKey: 'created',
     }"
+    @load-success="handleListLoaded"
   >
     <template #default="{ pageList }">
-      <ElTable :data="pageList" style="width: 100%" size="large">
+      <div
+        v-if="hasPermission('canDeleteContent') && selectedRows.length > 0"
+        class="batch-toolbar"
+      >
+        <span>{{
+          $t('documentCollection.selectedCount', { count: selectedRows.length })
+        }}</span>
+        <div class="batch-toolbar__actions">
+          <ElButton link :disabled="batchDeleting" @click="clearSelection()">
+            {{ $t('documentCollection.cancelSelection') }}
+          </ElButton>
+          <ElButton
+            link
+            type="danger"
+            :disabled="deletingDocumentIds.size > 0"
+            :loading="batchDeleting"
+            @click="handleBatchDelete"
+          >
+            {{ $t('documentCollection.batchDelete') }}
+          </ElButton>
+        </div>
+      </div>
+      <ElTable
+        ref="tableRef"
+        :data="pageList"
+        row-key="id"
+        style="width: 100%"
+        size="large"
+        @selection-change="handleSelectionChange"
+      >
+        <ElTableColumn
+          v-if="hasPermission('canDeleteContent')"
+          type="selection"
+          width="48"
+          :reserve-selection="true"
+          :selectable="isRowSelectable"
+        />
         <ElTableColumn
           prop="fileName"
           :label="$t('documentCollection.fileName')"
@@ -677,7 +908,11 @@ watch(
                 v-if="getPrimaryActionLabel(row)"
                 link
                 type="primary"
-                :disabled="isRetrying(row)"
+                :disabled="
+                  isRetrying(row) ||
+                  isBatchLocked(row) ||
+                  isDocumentDeleting(row)
+                "
                 :loading="isRetrying(row)"
                 @click="handlePrimaryAction(row)"
               >
@@ -693,6 +928,7 @@ watch(
                   link
                   :icon="Download"
                   :aria-label="$t('button.download')"
+                  :disabled="isBatchLocked(row) || isDocumentDeleting(row)"
                   @click="handleDownload(row)"
                 />
               </ElTooltip>
@@ -707,6 +943,8 @@ watch(
                   type="danger"
                   :icon="Delete"
                   :aria-label="$t('button.delete')"
+                  :disabled="isBatchLocked(row) || isDocumentDeleting(row)"
+                  :loading="isDocumentDeleting(row)"
                   @click="handleDelete(row)"
                 />
               </ElTooltip>
@@ -719,6 +957,26 @@ watch(
 </template>
 
 <style scoped>
+.batch-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  align-items: center;
+  justify-content: space-between;
+  min-height: 40px;
+  padding: var(--space-1) var(--space-3);
+  font-size: 13px;
+  color: var(--el-text-color-secondary);
+  background: hsl(var(--surface-subtle));
+  border-bottom: 1px solid hsl(var(--line-subtle));
+}
+
+.batch-toolbar__actions {
+  display: flex;
+  gap: var(--space-1);
+  align-items: center;
+}
+
 .time-container {
   display: flex;
   flex-direction: column;
diff --git a/easyflow-ui-admin/app/src/views/ai/documentCollection/KnowledgeShareView.vue b/easyflow-ui-admin/app/src/views/ai/documentCollection/KnowledgeShareView.vue
index df79ee0d..deea0e6e 100644
--- a/easyflow-ui-admin/app/src/views/ai/documentCollection/KnowledgeShareView.vue
+++ b/easyflow-ui-admin/app/src/views/ai/documentCollection/KnowledgeShareView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
+import { onBeforeRouteLeave } from 'vue-router';
 
 import { $t } from '@easyflow/locales';
 
@@ -29,6 +30,7 @@ const panelMode = ref<'chunk' | 'list' | 'process'>('list');
 const documentId = ref('');
 const documentTitle = ref('');
 const documentTableRef = ref();
+const chunkDocumentTableRef = ref();
 const importDocModalRef = ref<InstanceType<typeof ImportKnowledgeDocFile>>();
 
 const isFaqCollection = computed(
@@ -50,7 +52,12 @@ const knowledgeDescription = computed(
   () => knowledgeInfo.value.description || '',
 );
 const permissionScopeSet = computed(
-  () => new Set((permissionScopes.value || []).map((item) => String(item || '').toUpperCase())),
+  () =>
+    new Set(
+      (permissionScopes.value || []).map((item) =>
+        String(item || '').toUpperCase(),
+      ),
+    ),
 );
 const canCreateContent = computed(() =>
   permissionScopeSet.value.has('CONTENT_CREATE'),
@@ -64,9 +71,7 @@ const canUpdateContent = computed(() =>
 const canUpdateConfig = computed(() =>
   permissionScopeSet.value.has('CONFIG_UPDATE'),
 );
-const canDownloadContent = computed(() =>
-  permissionScopeSet.value.has('VIEW'),
-);
+const canDownloadContent = computed(() => permissionScopeSet.value.has('VIEW'));
 const canManageContent = computed(
   () =>
     canCreateContent.value ||
@@ -116,7 +121,12 @@ const handleViewDoc = (id: string) => {
   panelMode.value = 'chunk';
 };
 
-const backToDocumentList = () => {
+const canLeaveChunk = async () =>
+  panelMode.value !== 'chunk' ||
+  (await chunkDocumentTableRef.value?.confirmLeave?.()) !== false;
+
+const backToDocumentList = async () => {
+  if (!(await canLeaveChunk())) return;
   panelMode.value = 'list';
   documentTitle.value = '';
   documentTableRef.value?.reload?.();
@@ -132,7 +142,8 @@ const openImport = () => {
   importDocModalRef.value?.openDialog?.();
 };
 
-const handleCategoryClick = (key: string) => {
+const handleCategoryClick = async (key: string) => {
+  if (!(await canLeaveChunk())) return;
   selectedCategory.value = key;
   panelMode.value = 'list';
 };
@@ -140,6 +151,8 @@ const handleCategoryClick = (key: string) => {
 onMounted(() => {
   loadKnowledge();
 });
+
+onBeforeRouteLeave(() => canLeaveChunk());
 </script>
 
 <template>
@@ -191,9 +204,9 @@ onMounted(() => {
             ref="documentTableRef"
             :knowledge-id="knowledgeInfo.id"
             :permissions="{
-              canCreateContent: canCreateContent,
-              canDeleteContent: canDeleteContent,
-              canDownloadContent: canDownloadContent,
+              canCreateContent,
+              canDeleteContent,
+              canDownloadContent,
             }"
             :request-client="knowledgeShareApi"
             :endpoint-prefix="endpointPrefix"
@@ -202,8 +215,11 @@ onMounted(() => {
           />
           <ChunkDocumentTable
             v-else-if="panelMode === 'chunk'"
+            ref="chunkDocumentTableRef"
             :document-id="documentId"
             :manageable="canManageContent"
+            :editable="canUpdateContent"
+            :deletable="canDeleteContent"
             :request-client="knowledgeShareApi"
             :endpoint-prefix="endpointPrefix"
           />
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/editor-ui/src/MarkdownLiveEditor.test.ts b/easyflow-ui-admin/packages/@core/ui-kit/editor-ui/src/MarkdownLiveEditor.test.ts
index 84e0b3f9..3e00c4b2 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/editor-ui/src/MarkdownLiveEditor.test.ts
+++ b/easyflow-ui-admin/packages/@core/ui-kit/editor-ui/src/MarkdownLiveEditor.test.ts
@@ -22,6 +22,7 @@ const mockState = vi.hoisted(() => ({
   config: undefined as MockCrepeConfig | undefined,
   dispatch: vi.fn(),
   destroy: vi.fn(async () => undefined),
+  focus: vi.fn(),
   listSpreadNodes: [] as Array<{
     attrs: Record<string, unknown>;
     marks: unknown[];
@@ -107,7 +108,7 @@ vi.mock('@milkdown/crepe', () => {
               };
             }
             if (slice.name === 'editorView') {
-              return { dispatch: mockState.dispatch };
+              return { dispatch: mockState.dispatch, focus: mockState.focus };
             }
             return undefined;
           },
@@ -141,6 +142,7 @@ describe('markdownLiveEditor', () => {
     mockState.createPromise = undefined;
     mockState.dispatch.mockClear();
     mockState.firstNode = undefined;
+    mockState.focus.mockClear();
     mockState.replaceAll.mockClear();
     mockState.resolve.mockClear();
     mockState.selectionFrom = 2;
@@ -251,6 +253,7 @@ describe('markdownLiveEditor', () => {
 
     const pointerup = vi.fn();
     hiddenAddButton.addEventListener('pointerup', pointerup);
+    trigger.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }));
     trigger.click();
     expect(pointerup).toHaveBeenCalledOnce();
     trigger.dispatchEvent(
@@ -265,6 +268,297 @@ describe('markdownLiveEditor', () => {
     wrapper.unmount();
   });
 
+  it('adds accessible labels to the selected-text toolbar', async () => {
+    const wrapper = mount(MarkdownLiveEditor, {
+      props: { modelValue: '# Initial' },
+    });
+    await flushPromises();
+
+    const toolbar = document.createElement('div');
+    toolbar.className = 'milkdown-toolbar';
+    toolbar.innerHTML = Array.from(
+      { length: 5 },
+      () => '<button class="toolbar-item"></button>',
+    ).join('');
+    wrapper.get('.easyflow-markdown-live-editor__host').element.append(toolbar);
+
+    await vi.waitFor(() => {
+      expect(toolbar.getAttribute('role')).toBe('toolbar');
+      expect(toolbar.getAttribute('aria-label')).toBe('文本格式');
+      expect(
+        [...toolbar.querySelectorAll('.toolbar-item')].map((item) =>
+          item.getAttribute('aria-label'),
+        ),
+      ).toEqual(['加粗', '斜体', '删除线', '行内代码', '链接']);
+    });
+
+    wrapper.unmount();
+  });
+
+  it('shows the inline toolbar only for a text selection inside this editor', async () => {
+    const wrapper = mount(MarkdownLiveEditor, {
+      attachTo: document.body,
+      props: { modelValue: '# Initial', variant: 'inline' },
+    });
+    await flushPromises();
+    const host = wrapper.get('.easyflow-markdown-live-editor__host').element;
+    const text = document.createElement('p');
+    text.textContent = '可选择文本';
+    const toolbar = document.createElement('div');
+    toolbar.className = 'milkdown-toolbar';
+    toolbar.innerHTML = '<button class="toolbar-item"></button>';
+    host.append(text, toolbar);
+    await vi.waitFor(() =>
+      expect(toolbar.dataset.easyflowVisible).toBe('false'),
+    );
+
+    const range = document.createRange();
+    range.selectNodeContents(text);
+    const selection = document.getSelection();
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+    document.dispatchEvent(new Event('selectionchange'));
+    await vi.waitFor(() =>
+      expect(toolbar.dataset.easyflowVisible).toBe('true'),
+    );
+
+    selection?.collapseToEnd();
+    document.dispatchEvent(new Event('selectionchange'));
+    await vi.waitFor(() =>
+      expect(toolbar.dataset.easyflowVisible).toBe('false'),
+    );
+    wrapper.unmount();
+  });
+
+  it('keeps hidden table controls out of navigation and labels them when shown', async () => {
+    const wrapper = mount(MarkdownLiveEditor, {
+      props: { modelValue: '# Initial' },
+    });
+    await flushPromises();
+
+    const tableBlock = document.createElement('div');
+    tableBlock.className = 'milkdown-table-block';
+    tableBlock.innerHTML = [
+      '<div class="handle cell-handle" data-role="col-drag-handle" data-show="false">',
+      '<div class="button-group"><button></button><button></button><button></button><button></button></div>',
+      '</div>',
+    ].join('');
+    wrapper
+      .get('.easyflow-markdown-live-editor__host')
+      .element.append(tableBlock);
+    const handle = tableBlock.querySelector<HTMLElement>('.handle');
+    expect(handle).not.toBeNull();
+    if (!handle) {
+      throw new Error('Expected table handle to exist');
+    }
+
+    await vi.waitFor(() => {
+      expect(handle.getAttribute('aria-hidden')).toBe('true');
+      expect(
+        [...handle.querySelectorAll('button')].map((button) => [
+          button.getAttribute('aria-label'),
+          button.getAttribute('tabindex'),
+        ]),
+      ).toEqual([
+        ['左对齐', '-1'],
+        ['居中对齐', '-1'],
+        ['右对齐', '-1'],
+        ['删除列', '-1'],
+      ]);
+    });
+
+    handle.dataset.show = 'true';
+    await vi.waitFor(() => {
+      expect(handle.hasAttribute('aria-hidden')).toBe(false);
+      expect(handle.querySelector('button')?.hasAttribute('tabindex')).toBe(
+        false,
+      );
+    });
+    wrapper.unmount();
+  });
+
+  it('publishes meaningful toolbar transactions without requiring keyboard input', async () => {
+    const wrapper = mount(MarkdownLiveEditor, {
+      props: { modelValue: '# Initial' },
+    });
+    await flushPromises();
+
+    const toolbar = document.createElement('div');
+    toolbar.className = 'milkdown-toolbar';
+    const toolbarButton = document.createElement('button');
+    toolbarButton.className = 'toolbar-item';
+    toolbar.append(toolbarButton);
+    wrapper.get('.easyflow-markdown-live-editor__host').element.append(toolbar);
+    toolbarButton.dispatchEvent(
+      new PointerEvent('pointerdown', { bubbles: true }),
+    );
+
+    mockState.markdown = '**Initial**';
+    mockState.markdownUpdated?.({}, '**Initial**');
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([
+      '**Initial**',
+    ]);
+    wrapper.unmount();
+  });
+
+  it('flushes the current document before emitting the save shortcut', async () => {
+    const events: string[] = [];
+    const wrapper = mount(MarkdownLiveEditor, {
+      props: {
+        modelValue: '# Initial',
+        onSave: () => events.push('save'),
+        'onUpdate:modelValue': (value: string) =>
+          events.push(`update:${value}`),
+      },
+    });
+    await flushPromises();
+    mockState.markdown = '# Last input';
+    await wrapper
+      .get('.easyflow-markdown-live-editor__host')
+      .trigger('beforeinput');
+
+    await wrapper
+      .get('.easyflow-markdown-live-editor__host')
+      .trigger('keydown', { key: 's', metaKey: true });
+    (wrapper.vm as unknown as { flushMarkdown: () => string }).flushMarkdown();
+
+    expect(events).toEqual(['update:# Last input', 'save']);
+    wrapper.unmount();
+  });
+
+  it('keeps the original source when a flush only changes equivalent formatting', async () => {
+    const source = '- first\n- second';
+    const wrapper = mount(MarkdownLiveEditor, {
+      props: { modelValue: source },
+    });
+    await flushPromises();
+    mockState.markdown = '* first\n* second';
+
+    const flushed = (
+      wrapper.vm as unknown as { flushMarkdown: () => string }
+    ).flushMarkdown();
+
+    expect(flushed).toBe(source);
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+    wrapper.unmount();
+  });
+
+  it('does not flush internal document changes before the user edits', async () => {
+    const source = '# Initial';
+    const wrapper = mount(MarkdownLiveEditor, {
+      props: { modelValue: source },
+    });
+    await flushPromises();
+    mockState.markdown = '## Internal normalization';
+
+    const flushed = (
+      wrapper.vm as unknown as { flushMarkdown: () => string }
+    ).flushMarkdown();
+
+    expect(flushed).toBe(source);
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+    wrapper.unmount();
+  });
+
+  it('does not treat keyboard text selection as an edit', async () => {
+    const source = '# Initial';
+    const wrapper = mount(MarkdownLiveEditor, {
+      props: { modelValue: source },
+    });
+    await flushPromises();
+    const host = wrapper.get('.easyflow-markdown-live-editor__host');
+
+    await host.trigger('keydown', { key: 'Home' });
+    await host.trigger('keydown', { key: 'End', shiftKey: true });
+    mockState.markdown = '## Internal normalization';
+
+    const flushed = (
+      wrapper.vm as unknown as { flushMarkdown: () => string }
+    ).flushMarkdown();
+
+    expect(flushed).toBe(source);
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+    wrapper.unmount();
+  });
+
+  it('publishes undo and redo changes after a previous update was synchronized', async () => {
+    const wrapper = mount(MarkdownLiveEditor, {
+      props: { modelValue: '# Initial' },
+    });
+    await flushPromises();
+    const host = wrapper.get('.easyflow-markdown-live-editor__host');
+
+    await host.trigger('beforeinput');
+    mockState.markdown = '# Edited';
+    mockState.markdownUpdated?.({}, '# Edited');
+
+    await host.trigger('keydown', { key: 'z', metaKey: true });
+    await wrapper.setProps({ modelValue: '# Edited' });
+    mockState.markdown = '# Initial';
+    mockState.markdownUpdated?.({}, '# Initial');
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['# Initial']);
+
+    await wrapper.setProps({ modelValue: '# Initial' });
+    await host.trigger('keydown', { key: 'z', metaKey: true, shiftKey: true });
+    mockState.markdown = '# Edited';
+    mockState.markdownUpdated?.({}, '# Edited');
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['# Edited']);
+
+    await wrapper.setProps({ modelValue: '# Edited' });
+    await host.trigger('keydown', { ctrlKey: true, key: 'y' });
+    mockState.markdown = '# Initial';
+    expect(
+      (
+        wrapper.vm as unknown as { flushMarkdown: () => string }
+      ).flushMarkdown(),
+    ).toBe('# Initial');
+    wrapper.unmount();
+  });
+
+  it('treats table-handle dragging as a user edit', async () => {
+    const wrapper = mount(MarkdownLiveEditor, {
+      props: { modelValue: '# Initial' },
+    });
+    await flushPromises();
+    const handle = document.createElement('div');
+    handle.className = 'handle';
+    const tableBlock = document.createElement('div');
+    tableBlock.className = 'milkdown-table-block';
+    tableBlock.append(handle);
+    wrapper
+      .get('.easyflow-markdown-live-editor__host')
+      .element.append(tableBlock);
+
+    handle.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }));
+    mockState.markdown = '| moved |';
+
+    expect(
+      (
+        wrapper.vm as unknown as { flushMarkdown: () => string }
+      ).flushMarkdown(),
+    ).toBe('| moved |');
+    wrapper.unmount();
+  });
+
+  it('focuses without selecting content in the inline autofocus variant', async () => {
+    const wrapper = mount(MarkdownLiveEditor, {
+      props: {
+        autofocus: true,
+        modelValue: '# Initial',
+        variant: 'inline',
+      },
+    });
+    await flushPromises();
+
+    expect(wrapper.get('.easyflow-markdown-live-editor').classes()).toContain(
+      'is-inline',
+    );
+    expect(mockState.focus).toHaveBeenCalledOnce();
+    expect(mockState.setSelection).not.toHaveBeenCalled();
+    wrapper.unmount();
+  });
+
   it('emits the save shortcut only while the editor is writable', async () => {
     const wrapper = mount(MarkdownLiveEditor, {
       props: { modelValue: '# Initial' },
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/editor-ui/src/MarkdownLiveEditor.vue b/easyflow-ui-admin/packages/@core/ui-kit/editor-ui/src/MarkdownLiveEditor.vue
index 6ca01959..09c33b8b 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/editor-ui/src/MarkdownLiveEditor.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/editor-ui/src/MarkdownLiveEditor.vue
@@ -20,17 +20,21 @@ import '@milkdown/crepe/theme/common/style.css';
 
 const props = withDefaults(
   defineProps<{
+    autofocus?: boolean;
     modelValue: string;
     placeholder?: string;
     readonly?: boolean;
     resolveImageUrl?: (url: string) => Promise<string> | string;
     uploadImage?: (file: File) => Promise<string>;
+    variant?: 'document' | 'inline';
   }>(),
   {
+    autofocus: false,
     placeholder: '输入 Markdown 内容…',
     readonly: false,
     resolveImageUrl: undefined,
     uploadImage: undefined,
+    variant: 'document',
   },
 );
 
@@ -55,6 +59,15 @@ let ready = false;
 let syncingFromOutside = false;
 let synchronizedMarkdown = '';
 let domObserver: MutationObserver | undefined;
+let selectionFrame: number | undefined;
+const ENHANCED_DOM_SELECTOR = [
+  'a[href]',
+  '.milkdown-block-handle',
+  '.milkdown-slash-menu',
+  '.milkdown-table-block .handle',
+  '.milkdown-toolbar',
+  '.toolbar-item',
+].join(',');
 
 async function createEditor() {
   if (!hostRef.value) return;
@@ -173,6 +186,7 @@ async function createEditor() {
     crepe.setReadonly(props.readonly || fidelityLoss.value);
     crepeRef.value = crepe;
     ready = true;
+    if (props.autofocus && !props.readonly && !fidelityLoss.value) focus();
     emit('ready');
   } catch (error_) {
     failed.value = true;
@@ -229,14 +243,16 @@ onMounted(() => {
   hostRef.value?.addEventListener('click', handleLinkClick);
   hostRef.value?.addEventListener('click', handleFrontmatterActivate);
   hostRef.value?.addEventListener('beforeinput', prepareUserEdit, true);
-  hostRef.value?.addEventListener('drop', markUserEdited);
+  hostRef.value?.addEventListener('drop', markUserEdited, true);
   hostRef.value?.addEventListener('keydown', handleKeydown, true);
+  hostRef.value?.addEventListener('focusout', handleEditorFocusOut, true);
   hostRef.value?.addEventListener('paste', prepareUserEdit, true);
-  hostRef.value?.addEventListener('pointerup', prepareBlockMenuEdit, true);
+  hostRef.value?.addEventListener('pointerdown', prepareControlEdit, true);
+  document.addEventListener('selectionchange', handleSelectionChange);
   if (hostRef.value) {
-    domObserver = new MutationObserver(refreshRenderedContent);
+    domObserver = new MutationObserver(handleDomMutations);
     domObserver.observe(hostRef.value, {
-      attributeFilter: ['href'],
+      attributeFilter: ['data-show', 'href'],
       attributes: true,
       childList: true,
       subtree: true,
@@ -251,10 +267,13 @@ onBeforeUnmount(async () => {
   hostRef.value?.removeEventListener('click', handleLinkClick);
   hostRef.value?.removeEventListener('click', handleFrontmatterActivate);
   hostRef.value?.removeEventListener('beforeinput', prepareUserEdit, true);
-  hostRef.value?.removeEventListener('drop', markUserEdited);
+  hostRef.value?.removeEventListener('drop', markUserEdited, true);
   hostRef.value?.removeEventListener('keydown', handleKeydown, true);
+  hostRef.value?.removeEventListener('focusout', handleEditorFocusOut, true);
   hostRef.value?.removeEventListener('paste', prepareUserEdit, true);
-  hostRef.value?.removeEventListener('pointerup', prepareBlockMenuEdit, true);
+  hostRef.value?.removeEventListener('pointerdown', prepareControlEdit, true);
+  document.removeEventListener('selectionchange', handleSelectionChange);
+  if (selectionFrame !== undefined) cancelAnimationFrame(selectionFrame);
   domObserver?.disconnect();
   domObserver = undefined;
   await crepeRef.value?.destroy();
@@ -313,11 +332,17 @@ function markUserEdited() {
   hasUserEdited = true;
 }
 
-function prepareBlockMenuEdit(event: PointerEvent) {
+function prepareControlEdit(event: PointerEvent) {
   const target = event.target as HTMLElement | null;
   if (
     target?.closest(
-      '.milkdown-block-handle .operation-item, .milkdown-slash-menu .menu-group li',
+      [
+        '.milkdown-block-handle .operation-item',
+        '.milkdown-slash-menu li',
+        '.milkdown-table-block .handle',
+        '.milkdown-table-block button',
+        '.milkdown-toolbar .toolbar-item',
+      ].join(','),
     )
   ) {
     markUserEdited();
@@ -329,8 +354,10 @@ function prepareBlockMenuEdit(event: PointerEvent) {
  * ProseMirror otherwise allows a gap selection before the first atom, which
  * would serialize body content ahead of the required YAML metadata block.
  */
-function prepareUserEdit() {
-  markUserEdited();
+function prepareUserEdit(event?: Event) {
+  if (!(event instanceof KeyboardEvent) || isEditingKey(event)) {
+    markUserEdited();
+  }
   const crepe = crepeRef.value;
   if (!crepe) return;
   crepe.editor.action((ctx) => {
@@ -351,6 +378,15 @@ function prepareUserEdit() {
   });
 }
 
+function isEditingKey(event: KeyboardEvent) {
+  if (['Backspace', 'Delete', 'Enter', 'Tab'].includes(event.key)) return true;
+  if (event.key.length === 1 && !event.metaKey && !event.ctrlKey) return true;
+  return (
+    (event.metaKey || event.ctrlKey) &&
+    ['b', 'i', 'y', 'z'].includes(event.key.toLowerCase())
+  );
+}
+
 function sanitizeRenderedLinks() {
   hostRef.value
     ?.querySelectorAll<HTMLAnchorElement>('a[href]')
@@ -371,6 +407,112 @@ function sanitizeRenderedLinks() {
 function refreshRenderedContent() {
   sanitizeRenderedLinks();
   enhanceBlockMenu();
+  enhanceTableControls();
+  enhanceToolbar();
+}
+
+function handleDomMutations(records: MutationRecord[]) {
+  const needsRefresh = records.some((record) => {
+    if (record.type === 'attributes') return true;
+    return [...record.addedNodes].some(
+      (node) =>
+        node instanceof Element &&
+        (node.matches(ENHANCED_DOM_SELECTOR) ||
+          Boolean(node.querySelector(ENHANCED_DOM_SELECTOR))),
+    );
+  });
+  if (needsRefresh) refreshRenderedContent();
+}
+
+function enhanceTableControls() {
+  const host = hostRef.value;
+  if (!host) return;
+  const buttonLabels: Record<string, string[]> = {
+    'col-drag-handle': ['左对齐', '居中对齐', '右对齐', '删除列'],
+    'row-drag-handle': ['删除行'],
+    'x-line-drag-handle': ['插入行'],
+    'y-line-drag-handle': ['插入列'],
+  };
+  host
+    .querySelectorAll<HTMLElement>('.milkdown-table-block .handle[data-role]')
+    .forEach((handle) => {
+      const isVisible = handle.dataset.show !== 'false';
+      if (isVisible) handle.removeAttribute('aria-hidden');
+      else handle.setAttribute('aria-hidden', 'true');
+      const labels = buttonLabels[handle.dataset.role || ''] || [];
+      handle
+        .querySelectorAll<HTMLButtonElement>('button')
+        .forEach((button, index) => {
+          const label = labels[index] || '表格操作';
+          button.setAttribute('aria-label', label);
+          button.setAttribute('title', label);
+          if (isVisible) button.removeAttribute('tabindex');
+          else button.setAttribute('tabindex', '-1');
+        });
+    });
+}
+
+function enhanceToolbar() {
+  const toolbar =
+    hostRef.value?.querySelector<HTMLElement>('.milkdown-toolbar');
+  if (!toolbar) return;
+  toolbar.setAttribute('aria-label', '文本格式');
+  toolbar.setAttribute('role', 'toolbar');
+  const labels = ['加粗', '斜体', '删除线', '行内代码', '链接'];
+  toolbar
+    .querySelectorAll<HTMLButtonElement>('.toolbar-item')
+    .forEach((button, index) => {
+      const label = labels[index] || `格式操作 ${index + 1}`;
+      button.setAttribute('aria-label', label);
+      button.setAttribute('title', label);
+    });
+  updateInlineToolbarVisibility();
+}
+
+function handleSelectionChange() {
+  if (props.variant !== 'inline') return;
+  if (selectionFrame !== undefined) cancelAnimationFrame(selectionFrame);
+  selectionFrame = requestAnimationFrame(() => {
+    selectionFrame = undefined;
+    updateInlineToolbarVisibility();
+  });
+}
+
+function handleEditorFocusOut() {
+  if (props.variant !== 'inline') return;
+  requestAnimationFrame(() => {
+    if (!hostRef.value?.contains(document.activeElement)) {
+      setInlineToolbarVisible(false);
+    }
+  });
+}
+
+function updateInlineToolbarVisibility() {
+  if (props.variant !== 'inline') return;
+  const host = hostRef.value;
+  const selection = document.getSelection();
+  const visible = Boolean(
+    host &&
+      selection &&
+      !selection.isCollapsed &&
+      selection.toString().trim() &&
+      selection.anchorNode &&
+      selection.focusNode &&
+      host.contains(selection.anchorNode) &&
+      host.contains(selection.focusNode),
+  );
+  setInlineToolbarVisible(visible);
+}
+
+function setInlineToolbarVisible(visible: boolean) {
+  const toolbar =
+    hostRef.value?.querySelector<HTMLElement>('.milkdown-toolbar');
+  if (!toolbar) return;
+  toolbar.dataset.easyflowVisible = String(visible);
+  toolbar.setAttribute('aria-hidden', String(!visible));
+  toolbar
+    .querySelectorAll<HTMLButtonElement>('.toolbar-item')
+    .forEach((button) => button.setAttribute('tabindex', visible ? '0' : '-1'));
 }
 
 function enhanceBlockMenu() {
@@ -409,12 +551,20 @@ function handleKeydown(event: KeyboardEvent) {
     activateBlockMenu(blockMenuTrigger);
     return;
   }
-  if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 's') {
-    event.preventDefault();
-    if (!props.readonly) emit('save');
+  if (event.key === 'Escape' && props.variant === 'inline') {
+    document.getSelection()?.collapseToEnd();
+    setInlineToolbarVisible(false);
     return;
   }
-  prepareUserEdit();
+  if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 's') {
+    event.preventDefault();
+    if (!props.readonly) {
+      flushMarkdown();
+      emit('save');
+    }
+    return;
+  }
+  prepareUserEdit(event);
 }
 
 function reportFidelityLoss(crepe: Crepe) {
@@ -458,10 +608,47 @@ function normalizeListSpreadAttributes(crepe: Crepe) {
   });
   return repaired;
 }
+
+function flushMarkdown() {
+  const crepe = crepeRef.value;
+  if (!crepe || !ready || fidelityLoss.value) return props.modelValue || '';
+  if (!hasUserEdited) return props.modelValue || '';
+  normalizeListSpreadAttributes(crepe);
+  const nextMarkdown = normalizeLiveMarkdownUpdate(
+    props.modelValue || '',
+    crepe.getMarkdown(),
+  );
+  const hasMeaningfulDifference = hasMeaningfulMarkdownDifference(
+    props.modelValue || '',
+    nextMarkdown,
+  );
+  if (!hasMeaningfulDifference) {
+    synchronizedMarkdown = nextMarkdown;
+    return props.modelValue || '';
+  }
+  const shouldEmit =
+    !syncingFromOutside &&
+    nextMarkdown !== props.modelValue &&
+    nextMarkdown !== synchronizedMarkdown;
+  synchronizedMarkdown = nextMarkdown;
+  if (shouldEmit) emit('update:modelValue', nextMarkdown);
+  return nextMarkdown;
+}
+
+function focus() {
+  const crepe = crepeRef.value;
+  if (!crepe || props.readonly || fidelityLoss.value) return;
+  crepe.editor.action((ctx) => ctx.get(editorViewCtx).focus());
+}
+
+defineExpose({ flushMarkdown, focus });
 </script>
 
 <template>
-  <div class="easyflow-markdown-live-editor">
+  <div
+    class="easyflow-markdown-live-editor"
+    :class="[`is-${variant}`, { 'is-readonly': readonly || fidelityLoss }]"
+  >
     <div
       ref="hostRef"
       class="easyflow-markdown-live-editor__host"
@@ -998,6 +1185,128 @@ function normalizeListSpreadAttributes(crepe: Crepe) {
   opacity: 0.5;
 }
 
+.easyflow-markdown-live-editor.is-inline {
+  min-height: 64px;
+  overflow: visible;
+  scrollbar-gutter: auto;
+  font-size: 14px;
+  line-height: 1.72;
+  background: transparent;
+}
+
+.easyflow-markdown-live-editor.is-inline .easyflow-markdown-live-editor__host,
+.easyflow-markdown-live-editor.is-inline :deep(.milkdown) {
+  min-height: 0;
+}
+
+.easyflow-markdown-live-editor.is-inline :deep(.milkdown) {
+  --crepe-color-selected: hsl(var(--text-muted) / 38%);
+}
+
+.easyflow-markdown-live-editor.is-inline :deep(.ProseMirror) {
+  width: 100%;
+  min-height: 64px;
+  padding: var(--space-1) 0;
+  margin: 0;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.easyflow-markdown-live-editor.is-inline :deep(.ProseMirror > p) {
+  padding: 0;
+  margin: 0;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.easyflow-markdown-live-editor.is-inline :deep(.ProseMirror::selection),
+.easyflow-markdown-live-editor.is-inline :deep(.ProseMirror *::selection) {
+  color: hsl(var(--text-strong));
+  background: hsl(var(--text-muted) / 38%);
+}
+
+.easyflow-markdown-live-editor.is-inline
+  :deep(.ProseMirror .ProseMirror-selectednode) {
+  background: hsl(var(--text-muted) / 14%);
+  outline: 1px solid hsl(var(--text-muted) / 52%);
+  outline-offset: 1px;
+}
+
+.easyflow-markdown-live-editor.is-inline :deep(.milkdown-block-handle) {
+  display: none;
+}
+
+.easyflow-markdown-live-editor.is-inline :deep(.milkdown-toolbar) {
+  max-width: calc(100vw - var(--space-8));
+  overflow-x: auto;
+}
+
+.easyflow-markdown-live-editor.is-inline
+  :deep(.milkdown-toolbar[data-easyflow-visible='false']) {
+  visibility: hidden;
+  pointer-events: none;
+  opacity: 0;
+}
+
+.easyflow-markdown-live-editor.is-inline
+  :deep(.milkdown-toolbar .toolbar-item) {
+  width: 28px;
+  height: 28px;
+  padding: var(--space-1);
+  margin: var(--space-1);
+}
+
+.easyflow-markdown-live-editor.is-inline
+  :deep(.milkdown-toolbar .toolbar-item svg) {
+  width: 20px;
+  height: 20px;
+  color: hsl(var(--text-muted));
+  fill: hsl(var(--text-muted));
+}
+
+.easyflow-markdown-live-editor.is-inline
+  :deep(.milkdown-toolbar .toolbar-item.active svg) {
+  color: hsl(var(--text-strong));
+  fill: hsl(var(--text-strong));
+}
+
+.easyflow-markdown-live-editor.is-inline :deep(.milkdown-toolbar .divider) {
+  height: 20px;
+  margin: var(--space-2) var(--space-1);
+}
+
+.easyflow-markdown-live-editor.is-inline :deep(.milkdown-table-block) {
+  max-width: 100%;
+  overflow: visible;
+}
+
+.easyflow-markdown-live-editor.is-inline
+  :deep(.milkdown-table-block .table-wrapper) {
+  overflow: visible;
+}
+
+.easyflow-markdown-live-editor.is-inline
+  :deep(.milkdown-table-block .table-wrapper > table.children) {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.easyflow-markdown-live-editor.is-inline :deep(th),
+.easyflow-markdown-live-editor.is-inline :deep(td) {
+  min-width: 8rem;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+.easyflow-markdown-live-editor.is-readonly :deep(.milkdown-toolbar),
+.easyflow-markdown-live-editor.is-readonly :deep(.milkdown-block-handle),
+.easyflow-markdown-live-editor.is-readonly :deep(.milkdown-table-block .handle),
+.easyflow-markdown-live-editor.is-readonly :deep(.milkdown-slash-menu) {
+  display: none !important;
+}
+
 @supports not (color: color-mix(in srgb, red, blue)) {
   .easyflow-markdown-live-editor :deep(.ProseMirror code),
   .easyflow-markdown-live-editor :deep(.ProseMirror pre) {
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/editor-ui/src/index.ts b/easyflow-ui-admin/packages/@core/ui-kit/editor-ui/src/index.ts
index 9bdbdd2b..04ad3a70 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/editor-ui/src/index.ts
+++ b/easyflow-ui-admin/packages/@core/ui-kit/editor-ui/src/index.ts
@@ -1,5 +1,9 @@
 export { default as CodeEditor } from './CodeEditor.vue';
 export { default as CodeViewer } from './CodeViewer.vue';
+export {
+  containsRawHtml,
+  hasEquivalentMarkdownSemantics,
+} from './markdown-fidelity';
 export * from './markdown-security';
 export { default as MarkdownLiveEditor } from './MarkdownLiveEditor.vue';
 export { default as MarkdownSourceEditor } from './MarkdownSourceEditor.vue';
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/editor-ui/src/markdown-fidelity.test.ts b/easyflow-ui-admin/packages/@core/ui-kit/editor-ui/src/markdown-fidelity.test.ts
index e89bb009..0e4a097d 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/editor-ui/src/markdown-fidelity.test.ts
+++ b/easyflow-ui-admin/packages/@core/ui-kit/editor-ui/src/markdown-fidelity.test.ts
@@ -1,10 +1,19 @@
 import { describe, expect, it } from 'vitest';
 
 import {
+  containsRawHtml,
   hasEquivalentMarkdownSemantics,
   normalizeLiveMarkdownUpdate,
 } from './markdown-fidelity';
 
+describe('raw HTML detection', () => {
+  it('detects rendered HTML but ignores HTML-looking text inside code', () => {
+    expect(containsRawHtml('<table><tr><td>A</td></tr></table>')).toBe(true);
+    expect(containsRawHtml('`<table>`')).toBe(false);
+    expect(containsRawHtml('```html\n<table>\n```')).toBe(false);
+  });
+});
+
 describe('markdown semantic fidelity', () => {
   it('accepts equivalent list markers, rules, and table delimiter widths', () => {
     const source = [
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/editor-ui/src/markdown-fidelity.ts b/easyflow-ui-admin/packages/@core/ui-kit/editor-ui/src/markdown-fidelity.ts
index 42d54c29..11d526bf 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/editor-ui/src/markdown-fidelity.ts
+++ b/easyflow-ui-admin/packages/@core/ui-kit/editor-ui/src/markdown-fidelity.ts
@@ -21,6 +21,24 @@ export function hasEquivalentMarkdownSemantics(
   }
 }
 
+/**
+ * Raw HTML is preserved as text by the live editor for safety, so callers that
+ * promise rendered editing should use their source-mode fallback instead.
+ */
+export function containsRawHtml(markdown: string) {
+  try {
+    const nodes: MarkdownNode[] = [markdownParser.parse(markdown)];
+    while (nodes.length > 0) {
+      const node = nodes.pop();
+      if (node?.type === 'html') return true;
+      if (node?.children) nodes.push(...node.children);
+    }
+    return false;
+  } catch {
+    return false;
+  }
+}
+
 /**
  * Removes blank-paragraph markers generated by the live editor without
  * changing an explicit HTML break that already exists in the source.
@@ -71,3 +89,8 @@ function semanticTree(markdown: string) {
     (key, value) => (key === 'position' ? undefined : value),
   );
 }
+
+type MarkdownNode = {
+  children?: MarkdownNode[];
+  type?: string;
+};