分段修改完成

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) {