urbanLifeline/urbanLifelineWeb/example/DocumentSegmentDialog.vue

<template>
  <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"
          :disabled="!props.canWrite"
          :title="props.canWrite ? '添加分段' : '无添加权限'"
        >
          添加分段
        </el-button>
        <el-button 
          type="primary"
          @click="loadSegments(1)"
          size="default"
        >
          刷新
        </el-button>
      </div>
    </div>

    <!-- 分段列表 -->
    <div class="segment-list" v-loading="loading">
      <div 
        v-for="segment in segments" 
        :key="segment.id"
        class="segment-item"
      >
        <div class="segment-header">
          <span class="segment-index">分段 {{ segment.position }}</span>
          <span class="segment-info">
            {{ segment.word_count }} 字 · {{ segment.tokens }} tokens
          </span>
          <div class="segment-actions">
            <!-- 启用开关 -->
            <el-switch
              :model-value="segment.enabled"
              :active-text="segment.enabled ? '已启用' : '已禁用'"
              :loading="segment._switching"
              :disabled="!props.canWrite"
              @change="handleToggleEnabled(segment, $event)"
              style="--el-switch-on-color: #67C23A; margin-right: 12px;"
              :title="props.canWrite ? '' : '无修改权限'"
            />
            <el-tag 
              :type="getStatusType(segment.status)"
              size="small"
              style="margin-right: 8px;"
            >
              {{ getStatusText(segment.status) }}
            </el-tag>
            <!-- 编辑按钮 -->
            <el-button 
              v-if="!editingSegmentIds.has(segment.id)"
              type="primary" 
              size="small"
              @click="startEdit(segment)"
              :disabled="!props.canWrite"
              :title="props.canWrite ? '编辑分段' : '无编辑权限'"
            >
              编辑
            </el-button>
            <!-- 删除按钮 -->
            <el-button 
              v-if="!editingSegmentIds.has(segment.id)"
              type="danger" 
              size="small"
              @click="handleDeleteSegment(segment)"
              :loading="segment._deleting"
              :disabled="!props.canDelete"
              :title="props.canDelete ? '删除分段' : '无删除权限'"
            >
              删除
            </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">
          <!-- 编辑模式 -->
          <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>

        <!-- 关键词标签 -->
        <div class="segment-keywords" v-if="segment.keywords?.length">
          <el-tag
            v-for="keyword in segment.keywords"
            :key="keyword"
            size="small"
            style="margin-right: 8px;"
          >
            {{ keyword }}
          </el-tag>
        </div>
        
        <!-- 分段元数据 -->
        <div class="segment-meta">
          <span class="meta-item">
            <el-icon><Clock /></el-icon>
            创建时间: {{ formatTimestamp(segment.created_at) }}
          </span>
          <span class="meta-item" v-if="segment.completed_at">
            <el-icon><Check /></el-icon>
            完成时间: {{ formatTimestamp(segment.completed_at) }}
          </span>
          <span class="meta-item">
            <el-icon><View /></el-icon>
            命中次数: {{ segment.hit_count }}
          </span>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-if="!loading && segments.length === 0" class="empty-state">
        <p>暂无分段数据</p>
      </div>
    </div>

    <!-- 分页组件 -->
    <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>
    <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, 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({
  name: 'DocumentSegmentDialog'
});

interface Props {
  /** 是否显示对话框 */
  modelValue: boolean;
  /** Dify数据集ID */
  datasetId: string;
  /** Dify文档ID */
  documentId: string;
  /** 是否可写（修改分段） */
  canWrite?: boolean;
  /** 是否可删除（删除分段） */
  canDelete?: boolean;
}

const props = defineProps<Props>();
const emit = defineEmits(['update:modelValue']);

// 对话框显示状态
const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
});

// 数据状态
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(() => totalCount.value); // 使用API返回的总数
const totalWords = computed(() => 
  segments.value.reduce((sum, seg) => sum + (seg.word_count || 0), 0)
);
const totalTokens = computed(() => 
  segments.value.reduce((sum, seg) => sum + (seg.tokens || 0), 0)
);

// 组件挂载时自动加载数据（v-if 确保每次打开都会重新挂载）
onMounted(() => {
  loadSegments();
});

/**
 * 加载分段数据
 * @param page 页码，默认为当前页
 */
async function loadSegments(page = currentPage.value) {
  try {
    loading.value = true;
    
    // 调用Dify API获取分段列表（支持分页）
    const result = await documentSegmentApi.getDocumentSegments(
      props.datasetId,
      props.documentId,
      page,
      pageSize.value
    );
    
    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 || '加载分段失败');
    }
  } catch (error: any) {
    console.error('加载分段失败:', error);
    ElMessage.error(error.message || '加载分段失败');
  } finally {
    loading.value = false;
  }
}

/**
 * 处理每页条数改变
 */
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
        }]
    );
    
    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;
  }
}

/**
 * 获取状态类型
 */
function getStatusType(status: string): 'success' | 'info' | 'warning' | 'danger' {
  const typeMap: Record<string, 'success' | 'info' | 'warning' | 'danger'> = {
    'completed': 'success',
    'indexing': 'warning',
    'error': 'danger',
    'paused': 'info'
  };
  return typeMap[status] || 'info';
}

/**
 * 获取状态文本
 */
function getStatusText(status: string): string {
  const textMap: Record<string, string> = {
    'completed': '已完成',
    'indexing': '索引中',
    'error': '错误',
    'paused': '已暂停'
  };
  return textMap[status] || status;
}

/**
 * 格式化时间戳
 */
function formatTimestamp(timestamp: number): string {
  if (!timestamp) return '-';
  const date = new Date(timestamp * 1000);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  });
}

</script>

<style lang="scss" scoped>
.segment-dialog {
  :deep(.el-dialog) {
    border-radius: 14px;
    
    .el-dialog__header {
      padding: 24px 24px 16px;
      border-bottom: 1px solid #F3F3F5;
      
      .el-dialog__title {
        font-size: 18px;
        font-weight: 500;
        color: #101828;
        letter-spacing: -0.02em;
      }
    }
    
    .el-dialog__body {
      padding: 24px;
      background: #FAFAFA;
    }
    
    .el-dialog__footer {
      padding: 16px 24px;
      border-top: 1px solid #F3F3F5;
    }
  }
}

.top-actions {
  display: flex;
  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;

  .stats-summary {
    display: flex;
    gap: 24px;
    align-items: center;

    .stat-text {
      font-size: 14px;
      color: #6A7282;
      letter-spacing: -0.01em;

      strong {
        font-size: 16px;
        color: #101828;
        margin-left: 4px;
      }
    }
  }

  .action-buttons {
    display: flex;
    gap: 12px;
  }
}

.segment-list {
  max-height: 520px;
  overflow-y: auto;
  padding-right: 4px;
  
  /* 自定义滚动条 */
  &::-webkit-scrollbar {
    width: 6px;
  }
  
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  
  &::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 3px;
    
    &:hover {
      background: #9CA3AF;
    }
  }

  .segment-item {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.2s;

    &:hover {
      border-color: #E7000B;
      box-shadow: 0 4px 12px rgba(231, 0, 11, 0.12);
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  .segment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 12px;

    .segment-index {
      font-weight: 500;
      color: #101828;
      font-size: 14px;
      letter-spacing: -0.01em;
      white-space: nowrap;
    }

    .segment-info {
      flex: 1;
      font-size: 12px;
      color: #6A7282;
      letter-spacing: -0.01em;
      white-space: nowrap;
    }

    .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;
      border: 1px solid transparent;
      border-radius: 8px;
      line-height: 1.6;
      color: #4A5565;
      font-size: 14px;
      white-space: pre-wrap;
      word-break: break-word;
      letter-spacing: -0.01em;
    }
  }

  .segment-keywords {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    
    :deep(.el-tag) {
      background: #EFF6FF;
      border: 1px solid transparent;
      border-radius: 8px;
      color: #1447E6;
      font-size: 12px;
      padding: 2px 8px;
      height: 24px;
      line-height: 20px;
    }
  }

  .segment-meta {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);

    .meta-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: #667085;
      letter-spacing: -0.01em;

      .el-icon {
        font-size: 14px;
        color: #9CA3AF;
      }
    }
  }

  .empty-state {
    text-align: center;
    padding: 80px 20px;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 14px;

    p {
      font-size: 14px;
      color: #6A7282;
      margin: 0;
      letter-spacing: -0.01em;
    }
  }
}


/* 添加分段对话框样式 */
:deep(.el-dialog__wrapper) {
  .el-dialog {
    border-radius: 14px;
    
    .el-form-item__label {
      font-size: 14px;
      font-weight: 500;
      color: #0A0A0A;
      letter-spacing: -0.01em;
    }
    
    .el-input__wrapper {
      background: #F3F3F5;
      border: 1px solid transparent;
      border-radius: 8px;
      box-shadow: none;
      
      &:hover {
        border-color: rgba(231, 0, 11, 0.2);
      }
      
      &.is-focus {
        border-color: #E7000B;
        background: #FFFFFF;
      }
    }
    
    .el-textarea__inner {
      background: #F3F3F5;
      border: 1px solid transparent;
      border-radius: 8px;
      box-shadow: none;
      
      &:hover {
        border-color: rgba(231, 0, 11, 0.2);
      }
      
      &:focus {
        border-color: #E7000B;
        background: #FFFFFF;
      }
    }
    
    .el-select {
      .el-input__wrapper {
        background: #F3F3F5;
      }
    }
  }
}
</style>