From ab6c7c8576b3cbc9169c13457a8909b99972e481 Mon Sep 17 00:00:00 2001
From: wangys <3401275564@qq.com>
Date: Fri, 7 Nov 2025 15:17:49 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=86=E6=AE=B5=E4=BF=AE=E6=94=B9=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ai/controller/DifyProxyController.java    | 152 ++++-
 schoolNewsWeb/src/apis/ai/document-segment.ts |  74 ++-
 .../ai/components/DocumentSegmentDialog.vue   | 569 ++++++++++++++----
 3 files changed, 674 insertions(+), 121 deletions(-)

diff --git a/schoolNewsServ/ai/src/main/java/org/xyzh/ai/controller/DifyProxyController.java b/schoolNewsServ/ai/src/main/java/org/xyzh/ai/controller/DifyProxyController.java
index 7b0b1c3..31d4eaa 100644
--- a/schoolNewsServ/ai/src/main/java/org/xyzh/ai/controller/DifyProxyController.java
+++ b/schoolNewsServ/ai/src/main/java/org/xyzh/ai/controller/DifyProxyController.java
@@ -6,9 +6,10 @@ import org.springframework.web.bind.annotation.*;
 import org.xyzh.ai.client.DifyApiClient;
 import org.xyzh.ai.mapper.AiUploadFileMapper;
 import org.xyzh.common.core.domain.ResultDomain;
+import org.xyzh.common.core.page.PageDomain;
+import org.xyzh.common.core.page.PageParam;
 import org.xyzh.common.dto.ai.TbAiUploadFile;
 
-import com.alibaba.fastjson2.JSONArray;
 import com.alibaba.fastjson2.JSONObject;
 
 import java.util.Date;
@@ -38,27 +39,60 @@ public class DifyProxyController {
     // ===================== 文档分段管理 API =====================
 
     /**
-     * @description 获取文档分段列表
+     * @description 获取文档分段列表（支持分页）
      * @param datasetId Dify数据集ID
      * @param documentId Dify文档ID
-     * @return ResultDomain<String> 分段列表JSON
+     * @param page 页码（默认1）
+     * @param limit 每页条数（默认10）
+     * @return ResultDomain<JSONObject> 分段列表JSON（包含分页信息）
      * @author AI Assistant
      * @since 2025-11-04
      */
     @GetMapping("/datasets/{datasetId}/documents/{documentId}/segments")
     public ResultDomain<JSONObject> getDocumentSegments(
             @PathVariable(name = "datasetId") String datasetId,
-            @PathVariable(name = "documentId") String documentId) {
+            @PathVariable(name = "documentId") String documentId,
+            @RequestParam(name = "page", defaultValue = "1") int page,
+            @RequestParam(name = "limit", defaultValue = "20") int limit) {
         ResultDomain<JSONObject> result = new ResultDomain<>();
-        log.info("获取文档分段列表: datasetId={}, documentId={}", datasetId, documentId);
+        log.info("获取文档分段列表: datasetId={}, documentId={}, page={}, limit={}", 
+                datasetId, documentId, page, limit);
         
         try {
-            // 调用Dify API（使用默认配置的API Key）
-            String path = "/datasets/" + datasetId + "/documents/" + documentId + "/segments";
+            // 调用Dify API（使用默认配置的API Key，支持分页）
+            String path = "/datasets/" + datasetId + "/documents/" + documentId + 
+                         "/segments?page=" + page + "&limit=" + limit;
             String response = difyApiClient.get(path, null);
             JSONObject jsonObject = JSONObject.parseObject(response);
             
-            result.success("获取文档分段列表成功", JSONArray.parseArray(jsonObject.getJSONArray("data").toJSONString(), JSONObject.class));
+            // 解析数据列表
+            List<JSONObject> data = jsonObject.getJSONArray("data").toList(JSONObject.class);
+            
+            // 构建分页返回对象
+            PageDomain<JSONObject> pageDomain = new PageDomain<>();
+            pageDomain.setDataList(data);
+            
+            // 设置分页参数（添加空值检查）
+            PageParam pageParam = new PageParam();
+            pageParam.setPageSize(limit);
+            pageParam.setPageNumber(page);
+            
+            // 安全地获取 total，如果不存在则使用 data.size()
+            Long total = jsonObject.getLong("total");
+            pageParam.setTotalElements(total != null ? total : (long) data.size());
+            
+            // 安全地获取 total_pages，如果不存在则计算
+            Integer totalPages = jsonObject.getInteger("total_pages");
+            if (totalPages == null) {
+                long totalElements = pageParam.getTotalElements();
+                totalPages = (int) Math.ceil((double) totalElements / limit);
+            }
+            pageParam.setTotalPages(totalPages);
+            
+            pageDomain.setPageParam(pageParam);
+            
+            // 返回完整的分页数据
+            result.success("获取文档分段列表成功", pageDomain);
             return result;
         } catch (Exception e) {
             log.error("获取文档分段列表失败", e);
@@ -67,6 +101,108 @@ public class DifyProxyController {
         }
     }
 
+    /**
+     * @description 更新文档分段
+     * @param datasetId Dify数据集ID
+     * @param documentId Dify文档ID
+     * @param segmentId 分段ID
+     * @param requestBody 请求体（包含segment对象）
+     * @return ResultDomain<String> 更新结果
+     * @author AI Assistant
+     * @since 2025-11-07
+     */
+    @PostMapping("/datasets/{datasetId}/documents/{documentId}/segments/{segmentId}")
+    public ResultDomain<String> updateSegment(
+            @PathVariable(name = "datasetId") String datasetId,
+            @PathVariable(name = "documentId") String documentId,
+            @PathVariable(name = "segmentId") String segmentId,
+            @RequestBody Map<String, Object> requestBody) {
+        
+        log.info("更新文档分段: datasetId={}, documentId={}, segmentId={}", 
+                datasetId, documentId, segmentId);
+        
+        ResultDomain<String> result = new ResultDomain<>();
+        try {
+            // 调用Dify API（使用默认配置的API Key）
+            String path = "/datasets/" + datasetId + "/documents/" + documentId + 
+                         "/segments/" + segmentId;
+            String response = difyApiClient.post(path, requestBody, null);
+            
+            result.success("更新分段成功", response);
+            return result;
+        } catch (Exception e) {
+            log.error("更新分段失败", e);
+            result.fail("更新分段失败: " + e.getMessage());
+            return result;
+        }
+    }
+
+    /**
+     * @description 创建文档分段
+     * @param datasetId Dify数据集ID
+     * @param documentId Dify文档ID
+     * @param requestBody 请求体（包含segments数组）
+     * @return ResultDomain<String> 创建结果
+     * @author AI Assistant
+     * @since 2025-11-07
+     */
+    @PostMapping("/datasets/{datasetId}/documents/{documentId}/segments")
+    public ResultDomain<String> createSegment(
+            @PathVariable(name = "datasetId") String datasetId,
+            @PathVariable(name = "documentId") String documentId,
+            @RequestBody Map<String, Object> requestBody) {
+        
+        log.info("创建文档分段: datasetId={}, documentId={}", datasetId, documentId);
+        
+        ResultDomain<String> result = new ResultDomain<>();
+        try {
+            // 调用Dify API（使用默认配置的API Key）
+            String path = "/datasets/" + datasetId + "/documents/" + documentId + "/segments";
+            String response = difyApiClient.post(path, requestBody, null);
+            
+            result.success("创建分段成功", response);
+            return result;
+        } catch (Exception e) {
+            log.error("创建分段失败", e);
+            result.fail("创建分段失败: " + e.getMessage());
+            return result;
+        }
+    }
+
+    /**
+     * @description 删除文档分段
+     * @param datasetId Dify数据集ID
+     * @param documentId Dify文档ID
+     * @param segmentId 分段ID
+     * @return ResultDomain<String> 删除结果
+     * @author AI Assistant
+     * @since 2025-11-07
+     */
+    @DeleteMapping("/datasets/{datasetId}/documents/{documentId}/segments/{segmentId}")
+    public ResultDomain<String> deleteSegment(
+            @PathVariable(name = "datasetId") String datasetId,
+            @PathVariable(name = "documentId") String documentId,
+            @PathVariable(name = "segmentId") String segmentId) {
+        
+        log.info("删除文档分段: datasetId={}, documentId={}, segmentId={}", 
+                datasetId, documentId, segmentId);
+        
+        ResultDomain<String> result = new ResultDomain<>();
+        try {
+            // 调用Dify API（使用默认配置的API Key）
+            String path = "/datasets/" + datasetId + "/documents/" + documentId + 
+                         "/segments/" + segmentId;
+            String response = difyApiClient.delete(path, null);
+            
+            result.success("删除分段成功", response);
+            return result;
+        } catch (Exception e) {
+            log.error("删除分段失败", e);
+            result.fail("删除分段失败: " + e.getMessage());
+            return result;
+        }
+    }
+
     /**
      * @description 获取分段的子块列表
      * @param datasetId Dify数据集ID
diff --git a/schoolNewsWeb/src/apis/ai/document-segment.ts b/schoolNewsWeb/src/apis/ai/document-segment.ts
index 9ded4fc..d160266 100644
--- a/schoolNewsWeb/src/apis/ai/document-segment.ts
+++ b/schoolNewsWeb/src/apis/ai/document-segment.ts
@@ -18,17 +18,83 @@ import type {
  */
 export const documentSegmentApi = {
   /**
-   * 获取文档的所有分段（父级）
+   * 获取文档的所有分段（父级，支持分页）
    * @param datasetId Dify数据集ID
    * @param documentId Dify文档ID
-   * @returns Promise<ResultDomain<DifySegment[]>> 后端直接返回分段数组
+   * @param page 页码（默认1）
+   * @param limit 每页条数（默认10）
+   * @returns Promise<ResultDomain<any>> 返回包含data数组和分页信息的对象
    */
   async getDocumentSegments(
     datasetId: string,
-    documentId: string
+    documentId: string,
+    page = 1,
+    limit = 20
   ): Promise<ResultDomain<any>> {
     const response = await api.get<any>(
-      `/ai/dify/datasets/${datasetId}/documents/${documentId}/segments`
+      `/ai/dify/datasets/${datasetId}/documents/${documentId}/segments`,
+      {
+        page,
+        limit
+      },{showLoading: false}
+    );
+    return response.data;
+  },
+
+  /**
+   * 更新文档分段
+   * @param datasetId Dify数据集ID
+   * @param documentId Dify文档ID
+   * @param segmentId 分段ID
+   * @param segment 分段更新数据
+   * @returns Promise<ResultDomain<any>>
+   */
+  async updateSegment(
+    datasetId: string,
+    documentId: string,
+    segmentId: string,
+    segment: { content?: string; keywords?: string[]; enabled?: boolean }
+  ): Promise<ResultDomain<any>> {
+    const response = await api.post<any>(
+      `/ai/dify/datasets/${datasetId}/documents/${documentId}/segments/${segmentId}`,
+      { segment }
+    );
+    return response.data;
+  },
+
+  /**
+   * 创建文档分段
+   * @param datasetId Dify数据集ID
+   * @param documentId Dify文档ID
+   * @param segments 分段数据数组
+   * @returns Promise<ResultDomain<any>>
+   */
+  async createSegment(
+    datasetId: string,
+    documentId: string,
+    segments: Array<{ content: string; answer?: string; keywords?: string[] }>
+  ): Promise<ResultDomain<any>> {
+    const response = await api.post<any>(
+      `/ai/dify/datasets/${datasetId}/documents/${documentId}/segments`,
+      { segments }
+    );
+    return response.data;
+  },
+
+  /**
+   * 删除文档分段
+   * @param datasetId Dify数据集ID
+   * @param documentId Dify文档ID
+   * @param segmentId 分段ID
+   * @returns Promise<ResultDomain<any>>
+   */
+  async deleteSegment(
+    datasetId: string,
+    documentId: string,
+    segmentId: string
+  ): Promise<ResultDomain<any>> {
+    const response = await api.delete<any>(
+      `/ai/dify/datasets/${datasetId}/documents/${documentId}/segments/${segmentId}`
     );
     return response.data;
   },
diff --git a/schoolNewsWeb/src/views/admin/manage/ai/components/DocumentSegmentDialog.vue b/schoolNewsWeb/src/views/admin/manage/ai/components/DocumentSegmentDialog.vue
index 45e5535..576570a 100644
--- a/schoolNewsWeb/src/views/admin/manage/ai/components/DocumentSegmentDialog.vue
+++ b/schoolNewsWeb/src/views/admin/manage/ai/components/DocumentSegmentDialog.vue
@@ -1,24 +1,30 @@
 <template>
-  <el-dialog
-    v-model="visible"
-    title="文档分段管理"
-    width="1200px"
-    :close-on-click-modal="false"
-    class="segment-dialog"
-  >
-    <!-- 统计信息卡片 -->
-    <div class="segment-stats">
-      <div class="stat-item">
-        <div class="stat-label">总分段数</div>
-        <div class="stat-value">{{ totalSegments }}</div>
-      </div>
-      <div class="stat-item">
-        <div class="stat-label">总字数</div>
-        <div class="stat-value">{{ totalWords }}</div>
-      </div>
-      <div class="stat-item">
-        <div class="stat-label">总 Tokens</div>
-        <div class="stat-value">{{ totalTokens }}</div>
+  <div>
+    <el-dialog
+      v-model="visible"
+      title="文档分段管理"
+      width="1200px"
+      :close-on-click-modal="false"
+      class="segment-dialog"
+    >
+    <!-- 顶部操作栏 -->
+    <div class="top-actions">
+
+      <div class="action-buttons">
+        <el-button 
+          type="success"
+          @click="showAddSegmentDialog = true"
+          size="default"
+        >
+          添加分段
+        </el-button>
+        <el-button 
+          type="primary"
+          @click="loadSegments(1)"
+          size="default"
+        >
+          刷新
+        </el-button>
       </div>
     </div>
 
@@ -34,28 +40,78 @@
           <span class="segment-info">
             {{ segment.word_count }} 字 · {{ segment.tokens }} tokens
           </span>
-          <div class="segment-status">
-            <el-tag 
-              :type="segment.enabled ? 'success' : 'info'"
-              size="small"
-            >
-              {{ segment.enabled ? '已启用' : '已禁用' }}
-            </el-tag>
+          <div class="segment-actions">
+            <!-- 启用开关 -->
+            <el-switch
+              :model-value="segment.enabled"
+              :active-text="segment.enabled ? '已启用' : '已禁用'"
+              :loading="segment._switching"
+              @change="handleToggleEnabled(segment, $event)"
+              style="--el-switch-on-color: #67C23A; margin-right: 12px;"
+            />
             <el-tag 
               :type="getStatusType(segment.status)"
               size="small"
-              style="margin-left: 8px;"
+              style="margin-right: 8px;"
             >
               {{ getStatusText(segment.status) }}
             </el-tag>
+            <!-- 编辑按钮 -->
+            <el-button 
+              v-if="!editingSegmentIds.has(segment.id)"
+              type="primary" 
+              size="small"
+              @click="startEdit(segment)"
+            >
+              编辑
+            </el-button>
+            <!-- 删除按钮 -->
+            <el-button 
+              v-if="!editingSegmentIds.has(segment.id)"
+              type="danger" 
+              size="small"
+              @click="handleDeleteSegment(segment)"
+              :loading="segment._deleting"
+            >
+              删除
+            </el-button>
+            <!-- 保存和取消按钮 -->
+            <template v-else>
+              <el-button 
+                type="success" 
+                size="small"
+                @click="saveEdit(segment)"
+                :loading="segment._saving"
+              >
+                保存
+              </el-button>
+              <el-button 
+                size="small"
+                @click="cancelEdit(segment)"
+              >
+                取消
+              </el-button>
+            </template>
           </div>
         </div>
 
-        <!-- 分段内容显示（只读） -->
+        <!-- 分段内容显示或编辑 -->
         <div class="segment-content">
-          <div class="segment-text">
-            {{ segment.content }}
-          </div>
+          <!-- 编辑模式 -->
+          <template v-if="editingSegmentIds.has(segment.id)">
+            <el-input
+              v-model="editingContents[segment.id]"
+              type="textarea"
+              :rows="8"
+              placeholder="请输入分段内容"
+            />
+          </template>
+          <!-- 只读模式 -->
+          <template v-else>
+            <div class="segment-text">
+              {{ segment.content }}
+            </div>
+          </template>
         </div>
 
         <!-- 关键词标签 -->
@@ -93,25 +149,82 @@
       </div>
     </div>
 
-    <!-- 底部操作栏 -->
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button @click="visible = false">关闭</el-button>
-        <el-button 
-          type="primary"
-          @click="loadSegments"
+    <!-- 分页组件 -->
+    <div class="pagination-container" v-if="totalCount > 0">
+      <el-pagination
+        :current-page="currentPage"
+        :page-size="pageSize"
+        :page-sizes="[10, 15, 20, 50]"
+        :total="totalCount"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </el-dialog>
+
+  <!-- 添加分段对话框 -->
+  <el-dialog
+    v-model="showAddSegmentDialog"
+    title="添加分段"
+    width="700px"
+    :close-on-click-modal="false"
+  >
+    <el-form :model="newSegmentForm" label-width="80px">
+      <el-form-item label="分段内容" required>
+        <el-input
+          v-model="newSegmentForm.content"
+          type="textarea"
+          :rows="10"
+          placeholder="请输入分段内容"
+        />
+      </el-form-item>
+      <el-form-item label="关键词">
+        <el-tag
+          v-for="keyword in newSegmentForm.keywords"
+          :key="keyword"
+          closable
+          @close="removeKeyword(keyword)"
+          style="margin-right: 8px;"
         >
-          刷新
+          {{ keyword }}
+        </el-tag>
+        <el-input
+          v-if="keywordInputVisible"
+          ref="keywordInputRef"
+          v-model="keywordInputValue"
+          size="small"
+          style="width: 120px;"
+          @keyup.enter="handleKeywordInputConfirm"
+          @blur="handleKeywordInputConfirm"
+        />
+        <el-button
+          v-else
+          size="small"
+          @click="showKeywordInput"
+        >
+          + 添加关键词
         </el-button>
-      </div>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="showAddSegmentDialog = false">取消</el-button>
+      <el-button 
+        type="primary" 
+        @click="handleCreateSegment"
+        :loading="creatingSegment"
+      >
+        确定
+      </el-button>
     </template>
   </el-dialog>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
-import { ElMessage } from 'element-plus';
-import { Clock, Check, View } from '@element-plus/icons-vue';
+import { ref, computed, onMounted, nextTick } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { Clock, Check, View, Loading } from '@element-plus/icons-vue';
 import { documentSegmentApi } from '../../../../../apis/ai';
 
 defineOptions({
@@ -139,9 +252,28 @@ const visible = computed({
 // 数据状态
 const loading = ref(false);
 const segments = ref<any[]>([]);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const totalCount = ref(0); // API 返回的总分段数
+
+// 编辑状态
+const editingSegmentIds = ref<Set<string>>(new Set());
+const editingContents = ref<Record<string, string>>({});
+const originalContents = ref<Record<string, string>>({});
+
+// 新增分段相关
+const showAddSegmentDialog = ref(false);
+const creatingSegment = ref(false);
+const newSegmentForm = ref({
+  content: '',
+  keywords: [] as string[]
+});
+const keywordInputVisible = ref(false);
+const keywordInputValue = ref('');
+const keywordInputRef = ref<any>(null);
 
 // 统计信息
-const totalSegments = computed(() => segments.value.length);
+const totalSegments = computed(() => totalCount.value); // 使用API返回的总数
 const totalWords = computed(() => 
   segments.value.reduce((sum, seg) => sum + (seg.word_count || 0), 0)
 );
@@ -156,20 +288,30 @@ onMounted(() => {
 
 /**
  * 加载分段数据
+ * @param page 页码，默认为当前页
  */
-async function loadSegments() {
+async function loadSegments(page = currentPage.value) {
   try {
     loading.value = true;
     
-    // 直接获取父级分段列表（Dify的分段本身就是主要内容）
+    // 调用Dify API获取分段列表（支持分页）
     const result = await documentSegmentApi.getDocumentSegments(
       props.datasetId,
-      props.documentId
+      props.documentId,
+      page,
+      pageSize.value
     );
     
-    if (result.success && result.dataList) {
-      // 直接使用父级分段数据（后端已经从Dify响应中提取了data数组）
-      segments.value = result.dataList || [];
+    if (result.success && result.pageDomain) {
+      const responseData = result.pageDomain as any;
+      
+      // 重新加载数据
+      segments.value = responseData.dataList || [];
+      
+      // 更新分页信息
+      currentPage.value = responseData.pageParam?.pageNumber || 1;
+      totalCount.value = responseData.pageParam?.totalElements || 0;
+      
     } else {
       segments.value = [];
       ElMessage.error(result.message || '加载分段失败');
@@ -182,6 +324,237 @@ async function loadSegments() {
   }
 }
 
+/**
+ * 处理每页条数改变
+ */
+function handleSizeChange(size: number) {
+  pageSize.value = size;
+  loadSegments(1);
+}
+
+/**
+ * 处理页码改变
+ */
+function handleCurrentChange(page: number) {
+  loadSegments(page);
+}
+
+/**
+ * 切换分段启用状态
+ */
+async function handleToggleEnabled(segment: any, enabled: boolean) {
+  if (!props.datasetId || !props.documentId || !segment.id) {
+    ElMessage.error('分段信息不完整');
+    return;
+  }
+  
+  try {
+    (segment as any)._switching = true;
+    
+    const result = await documentSegmentApi.updateSegment(
+      props.datasetId,
+      props.documentId,
+      segment.id,
+      { enabled }
+    );
+    
+    if (result.success) {
+      segment.enabled = enabled;
+      ElMessage.success(enabled ? '已启用分段' : '已禁用分段');
+    } else {
+      ElMessage.error(result.message || '更新失败');
+    }
+  } catch (error: any) {
+    console.error('更新分段状态失败:', error);
+    ElMessage.error('更新失败');
+  } finally {
+    (segment as any)._switching = false;
+  }
+}
+
+/**
+ * 开始编辑分段
+ */
+function startEdit(segment: any) {
+  editingSegmentIds.value.add(segment.id);
+  editingContents.value[segment.id] = segment.content;
+  originalContents.value[segment.id] = segment.content;
+}
+
+/**
+ * 保存编辑
+ */
+async function saveEdit(segment: any) {
+  const newContent = editingContents.value[segment.id];
+  
+  if (!newContent || !newContent.trim()) {
+    ElMessage.warning('分段内容不能为空');
+    return;
+  }
+  
+  if (newContent === originalContents.value[segment.id]) {
+    ElMessage.info('内容未修改');
+    cancelEdit(segment);
+    return;
+  }
+  
+  try {
+    (segment as any)._saving = true;
+    
+    const result = await documentSegmentApi.updateSegment(
+      props.datasetId,
+      props.documentId,
+      segment.id,
+      { content: newContent }
+    );
+    
+    if (result.success) {
+      segment.content = newContent;
+      editingSegmentIds.value.delete(segment.id);
+      delete editingContents.value[segment.id];
+      delete originalContents.value[segment.id];
+      ElMessage.success('保存成功');
+      
+      // 重新加载数据以更新字数和 tokens
+      await loadSegments();
+    } else {
+      ElMessage.error(result.message || '保存失败');
+    }
+  } catch (error: any) {
+    console.error('保存分段失败:', error);
+    ElMessage.error('保存失败');
+  } finally {
+    (segment as any)._saving = false;
+  }
+}
+
+/**
+ * 取消编辑
+ */
+function cancelEdit(segment: any) {
+  editingSegmentIds.value.delete(segment.id);
+  delete editingContents.value[segment.id];
+  delete originalContents.value[segment.id];
+}
+
+/**
+ * 创建新分段
+ */
+async function handleCreateSegment() {
+  const content = newSegmentForm.value.content.trim();
+  
+  if (!content) {
+    ElMessage.warning('分段内容不能为空');
+    return;
+  }
+  
+  try {
+    creatingSegment.value = true;
+    
+    const result = await documentSegmentApi.createSegment(
+      props.datasetId,
+      props.documentId,
+      [{
+        content,
+        keywords: newSegmentForm.value.keywords.length > 0 ? newSegmentForm.value.keywords : undefined
+      }]
+    );
+    
+    if (result.success) {
+      ElMessage.success('添加成功');
+      showAddSegmentDialog.value = false;
+      // 重置表单
+      newSegmentForm.value = {
+        content: '',
+        keywords: []
+      };
+      // 重新加载数据
+      await loadSegments();
+    } else {
+      ElMessage.error(result.message || '添加失败');
+    }
+  } catch (error: any) {
+    console.error('创建分段失败:', error);
+    ElMessage.error('添加失败');
+  } finally {
+    creatingSegment.value = false;
+  }
+}
+
+/**
+ * 显示关键词输入框
+ */
+function showKeywordInput() {
+  keywordInputVisible.value = true;
+  nextTick(() => {
+    keywordInputRef.value?.focus();
+  });
+}
+
+/**
+ * 确认添加关键词
+ */
+function handleKeywordInputConfirm() {
+  const value = keywordInputValue.value.trim();
+  
+  if (value && !newSegmentForm.value.keywords.includes(value)) {
+    newSegmentForm.value.keywords.push(value);
+  }
+  
+  keywordInputVisible.value = false;
+  keywordInputValue.value = '';
+}
+
+/**
+ * 移除关键词
+ */
+function removeKeyword(keyword: string) {
+  const index = newSegmentForm.value.keywords.indexOf(keyword);
+  if (index > -1) {
+    newSegmentForm.value.keywords.splice(index, 1);
+  }
+}
+
+/**
+ * 删除分段
+ */
+async function handleDeleteSegment(segment: any) {
+  try {
+    await ElMessageBox.confirm(
+      `确定要删除分段 ${segment.position} 吗？此操作不可恢复。`,
+      '确认删除',
+      {
+        type: 'warning',
+        confirmButtonText: '确定',
+        cancelButtonText: '取消'
+      }
+    );
+    
+    (segment as any)._deleting = true;
+    
+    const result = await documentSegmentApi.deleteSegment(
+      props.datasetId,
+      props.documentId,
+      segment.id
+    );
+    
+    if (result.success) {
+      ElMessage.success('删除成功');
+      // 重新加载数据
+      await loadSegments();
+    } else {
+      ElMessage.error(result.message || '删除失败');
+    }
+  } catch (error: any) {
+    if (error !== 'cancel') {
+      console.error('删除分段失败:', error);
+      ElMessage.error('删除失败');
+    }
+  } finally {
+    (segment as any)._deleting = false;
+  }
+}
+
 /**
  * 获取状态类型
  */
@@ -255,40 +628,38 @@ function formatTimestamp(timestamp: number): string {
   }
 }
 
-.segment-stats {
+.top-actions {
   display: flex;
-  gap: 12px;
-  margin-bottom: 20px;
+  justify-content: end;
+  align-items: center;
+  margin-bottom: 10px;
+  padding: 8px 20px;
+  background: #FFFFFF;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 14px;
 
-  .stat-item {
-    flex: 1;
-    background: #FFFFFF;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 14px;
-    padding: 20px 16px;
-    text-align: center;
-    transition: all 0.2s;
+  .stats-summary {
+    display: flex;
+    gap: 24px;
+    align-items: center;
 
-    &:hover {
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-      transform: translateY(-2px);
-    }
-
-    .stat-label {
+    .stat-text {
       font-size: 14px;
-      font-weight: 400;
-      color: #4A5565;
-      margin-bottom: 8px;
+      color: #6A7282;
       letter-spacing: -0.01em;
-    }
 
-    .stat-value {
-      font-size: 28px;
-      font-weight: 400;
-      color: #101828;
-      letter-spacing: -0.02em;
+      strong {
+        font-size: 16px;
+        color: #101828;
+        margin-left: 4px;
+      }
     }
   }
+
+  .action-buttons {
+    display: flex;
+    gap: 12px;
+  }
 }
 
 .segment-list {
@@ -355,13 +726,24 @@ function formatTimestamp(timestamp: number): string {
       white-space: nowrap;
     }
 
-    .segment-status {
+    .segment-actions {
       display: flex;
+      align-items: center;
       gap: 8px;
+      flex-wrap: wrap;
     }
   }
 
   .segment-content {
+    margin-bottom: 12px;
+    
+    .el-textarea {
+      textarea {
+        font-family: inherit;
+        font-size: 14px;
+        line-height: 1.6;
+      }
+    }
     .segment-text {
       padding: 12px;
       background: #F9FAFB;
@@ -433,37 +815,6 @@ function formatTimestamp(timestamp: number): string {
   }
 }
 
-.dialog-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  
-  :deep(.el-button) {
-    border-radius: 8px;
-    font-weight: 500;
-    letter-spacing: -0.01em;
-    
-    &.el-button--default {
-      background: #F3F3F5;
-      border-color: transparent;
-      color: #0A0A0A;
-      
-      &:hover {
-        background: #E5E5E7;
-      }
-    }
-    
-    &.el-button--primary {
-      background: #E7000B;
-      border-color: #E7000B;
-      
-      &:hover {
-        background: #C90009;
-        border-color: #C90009;
-      }
-    }
-  }
-}
 
 /* 添加分段对话框样式 */
 :deep(.el-dialog__wrapper) {