@huyooo/ai-chat-frontend-vue 0.1.6 → 0.1.7

package/src/components/common/IndexingSettings.vue

@@ -0,0 +1,580 @@
+<template>
+  <div class="indexing-settings">
+    <!-- 代码库索引部分 -->
+    <div class="setting-item indexing-section">
+      <div class="setting-info">
+        <div class="setting-label">代码库索引</div>
+        <p class="setting-description">
+          嵌入代码库以改进上下文理解和知识。所有数据（嵌入向量、元数据和代码）都存储在本地。
+        </p>
+        <div class="indexing-content">
+          <!-- 进度条 -->
+          <div class="progress-container">
+            <div class="progress-bar">
+              <div 
+                class="progress-fill" 
+                :style="{ width: `${progressPercentage}%` }"
+              ></div>
+            </div>
+            <div class="progress-text">
+              <span v-if="isIndexing">
+                <span v-if="currentStage === 'scanning'">
+                  正在扫描文件... (已扫描 {{ progressIndexed.toLocaleString() }} 个文件)
+                </span>
+                <span v-else>
+                  {{ progressPercentage }}% ({{ progressIndexed }}/{{ progressTotal }})
+                </span>
+              </span>
+              <span v-else>{{ indexedFiles.toLocaleString() }} 个文件</span>
+            </div>
+          </div>
+
+          <!-- 统计信息 -->
+          <div v-if="!isIndexing && indexedFiles > 0" class="stats-info">
+            <div class="stat-item">
+              <Icon icon="lucide:database" width="14" />
+              <span>索引大小: {{ indexSize }}</span>
+            </div>
+            <div v-if="lastUpdated" class="stat-item">
+              <Icon icon="lucide:clock" width="14" />
+              <span>最后更新: {{ lastUpdated }}</span>
+            </div>
+          </div>
+
+          <!-- 当前文件信息 -->
+          <div v-if="isIndexing && currentFile" class="current-file">
+            <Icon icon="lucide:file-text" width="14" />
+            <span class="file-path">{{ currentFile }}</span>
+          </div>
+
+          <!-- 操作按钮 -->
+          <div class="action-buttons">
+            <button 
+              v-if="!isIndexing"
+              class="edit-btn"
+              @click="handleSync"
+            >
+              <Icon icon="lucide:refresh-cw" width="16" />
+              <span>同步</span>
+            </button>
+            <button 
+              v-else
+              class="edit-btn"
+              @click="handleCancelIndex"
+            >
+              <Icon icon="lucide:x" width="16" />
+              <span>取消</span>
+            </button>
+            <button 
+              class="edit-btn delete-btn"
+              :disabled="isIndexing"
+              @click="showDeleteConfirm = true"
+            >
+              <Icon icon="lucide:trash-2" width="16" />
+              <span>删除索引</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 删除确认对话框 -->
+  <ConfirmDialog
+    v-model:visible="showDeleteConfirm"
+    type="danger"
+    title="删除索引"
+    :message="`确定要删除所有索引吗？\n\n这将删除 ${indexedFiles.toLocaleString()} 个文件的索引数据（${indexSize}），此操作无法撤销。`"
+    confirm-text="删除"
+    cancel-text="取消"
+    @confirm="handleDeleteIndex"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { Icon } from '@iconify/vue'
+import ConfirmDialog from './ConfirmDialog.vue'
+
+// 索引状态
+const indexedFiles = ref(0)
+const isIndexing = ref(false)
+const currentFile = ref<string | null>(null)
+const progressPercentage = ref(100)
+const progressIndexed = ref(0)
+const progressTotal = ref(0)
+const currentStage = ref<'scanning' | 'parsing' | 'embedding' | 'storing' | 'done' | null>(null)
+const showDeleteConfirm = ref(false)
+const indexSize = ref('0 B')
+const lastUpdated = ref<string | null>(null)
+const cancelIndexing = ref(false)
+
+/** 格式化文件大小 */
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`
+}
+
+/** 格式化日期 */
+function formatDate(date: Date): string {
+  const now = new Date()
+  const diff = now.getTime() - date.getTime()
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
+  
+  if (days === 0) {
+    const hours = Math.floor(diff / (1000 * 60 * 60))
+    if (hours === 0) {
+      const minutes = Math.floor(diff / (1000 * 60))
+      return minutes <= 1 ? '刚刚' : `${minutes} 分钟前`
+    }
+    return `${hours} 小时前`
+  }
+  
+  if (days === 1) return '昨天'
+  if (days < 7) return `${days} 天前`
+  if (days < 30) return `${Math.floor(days / 7)} 周前`
+  if (days < 365) return `${Math.floor(days / 30)} 个月前`
+  return date.toLocaleDateString('zh-CN', { year: 'numeric', month: 'short', day: 'numeric' })
+}
+
+/** 获取索引统计信息 */
+async function fetchIndexStats() {
+  try {
+    const bridge = (window as any).aiChatBridge
+    if (bridge?.getIndexStats) {
+      const stats = await bridge.getIndexStats()
+      indexedFiles.value = stats.totalDocuments || 0
+      indexSize.value = formatSize(stats.indexSize || 0)
+      lastUpdated.value = stats.lastUpdated ? formatDate(new Date(stats.lastUpdated)) : null
+    } else {
+      // Bridge 方法未实现，显示默认值
+      indexedFiles.value = 0
+      indexSize.value = '0 B'
+      lastUpdated.value = null
+      console.warn('getIndexStats 方法未在 bridge 中实现')
+    }
+  } catch (error) {
+    console.error('获取索引统计失败:', error)
+    // 出错时显示默认值
+    indexedFiles.value = 0
+    indexSize.value = '0 B'
+    lastUpdated.value = null
+  }
+}
+
+/** 同步索引 */
+async function handleSync() {
+  if (isIndexing.value) return
+  
+  const bridge = (window as any).aiChatBridge
+  if (!bridge?.syncIndex) {
+    console.error('syncIndex 方法未在 bridge 中实现')
+    return
+  }
+  
+  // 确保进度监听器已设置
+  if (!progressCleanup) {
+    setupProgressListener()
+  }
+  
+  isIndexing.value = true
+  cancelIndexing.value = false
+  progressPercentage.value = 0
+  progressIndexed.value = 0
+  progressTotal.value = 0
+  currentStage.value = null
+  currentFile.value = null
+  
+  try {
+    await bridge.syncIndex()
+  } catch (error) {
+    if (!cancelIndexing.value) {
+      console.error('同步索引失败:', error)
+    }
+    isIndexing.value = false
+    currentFile.value = null
+  }
+}
+
+/** 取消索引 */
+async function handleCancelIndex() {
+  cancelIndexing.value = true
+  isIndexing.value = false
+  currentFile.value = null
+  
+  const bridge = (window as any).aiChatBridge
+  if (bridge?.cancelIndex) {
+    try {
+      await bridge.cancelIndex()
+    } catch (error) {
+      console.error('取消索引失败:', error)
+    }
+  }
+}
+
+
+/** 删除索引 */
+async function handleDeleteIndex() {
+  if (isIndexing.value) return
+  
+  showDeleteConfirm.value = false
+  
+  const bridge = (window as any).aiChatBridge
+  if (!bridge?.deleteIndex) {
+    console.error('deleteIndex 方法未在 bridge 中实现')
+    return
+  }
+  
+  try {
+    await bridge.deleteIndex()
+    
+    // 刷新统计
+    await fetchIndexStats()
+  } catch (error) {
+    console.error('删除索引失败:', error)
+  }
+}
+
+// 进度监听器清理函数
+let progressCleanup: (() => void) | null = null
+
+/** 设置进度监听器 */
+function setupProgressListener() {
+  // 如果已有监听器，先清理
+  if (progressCleanup) {
+    progressCleanup()
+    progressCleanup = null
+  }
+  
+  const bridge = (window as any).aiChatBridge
+  if (!bridge?.onIndexProgress) {
+    return
+  }
+  
+  // 订阅进度更新（始终监听，即使没有主动触发索引）
+  progressCleanup = bridge.onIndexProgress((progress: {
+    indexed: number
+    total: number
+    currentFile?: string
+    stage: string
+    error?: string
+  }) => {
+    if (progress.error) {
+      console.error('索引错误:', progress.error)
+      isIndexing.value = false
+      currentFile.value = null
+      return
+    }
+    
+    if (progress.stage === 'cancelled') {
+      isIndexing.value = false
+      currentStage.value = null
+      currentFile.value = null
+      cancelIndexing.value = true
+      return
+    }
+    
+    // 如果收到进度更新，说明正在索引
+    if (progress.stage !== 'done') {
+      isIndexing.value = true
+    }
+    
+    // 更新阶段
+    currentStage.value = progress.stage as 'scanning' | 'parsing' | 'embedding' | 'storing' | 'done' | null
+    
+    // 扫描阶段：total 为 0，使用 indexed 表示已扫描的文件数
+    if (progress.stage === 'scanning') {
+      progressIndexed.value = progress.indexed
+      progressTotal.value = 0
+      progressPercentage.value = 0 // 扫描阶段不显示百分比
+    } else {
+      progressIndexed.value = progress.indexed
+      progressTotal.value = progress.total
+      progressPercentage.value = progress.total > 0 
+        ? Math.round((progress.indexed / progress.total) * 100) 
+        : 0
+    }
+    currentFile.value = progress.currentFile || null
+    
+    if (progress.stage === 'done') {
+      isIndexing.value = false
+      currentStage.value = null
+      currentFile.value = null
+      // 同步完成后刷新统计
+      fetchIndexStats()
+    }
+  })
+}
+
+/** 检查索引状态并恢复进度显示 */
+async function checkIndexStatus() {
+  const bridge = (window as any).aiChatBridge
+  if (!bridge?.getIndexStatus) {
+    return
+  }
+  
+  try {
+    const status = await bridge.getIndexStatus()
+    if (status.isIndexing && status.lastProgress) {
+      // 如果有正在进行的索引任务，恢复进度显示
+      isIndexing.value = true
+      const progress = status.lastProgress
+      
+      // 恢复进度状态
+      currentStage.value = progress.stage as 'scanning' | 'parsing' | 'embedding' | 'storing' | 'done' | null
+      
+      if (progress.stage === 'scanning') {
+        progressIndexed.value = progress.indexed
+        progressTotal.value = 0
+        progressPercentage.value = 0
+      } else {
+        progressIndexed.value = progress.indexed
+        progressTotal.value = progress.total
+        progressPercentage.value = progress.total > 0 
+          ? Math.round((progress.indexed / progress.total) * 100) 
+          : 0
+      }
+      
+      currentFile.value = progress.currentFile || null
+    }
+  } catch (error) {
+    console.error('检查索引状态失败:', error)
+  }
+}
+
+// 组件挂载时获取统计信息、注册监听器、检查索引状态并设置进度监听
+onMounted(async () => {
+  const bridge = (window as any).aiChatBridge
+  
+  // 注册索引进度监听器
+  if (bridge?.registerIndexListener) {
+    try {
+      await bridge.registerIndexListener()
+    } catch (error) {
+      console.error('注册索引进度监听器失败:', error)
+    }
+  }
+  
+  await fetchIndexStats()
+  setupProgressListener()
+  await checkIndexStatus()
+})
+
+// 组件卸载时清理进度监听器
+onUnmounted(() => {
+  const bridge = (window as any).aiChatBridge
+  
+  // 注销索引进度监听器
+  if (bridge?.unregisterIndexListener) {
+    try {
+      bridge.unregisterIndexListener()
+    } catch (error) {
+      console.error('注销索引进度监听器失败:', error)
+    }
+  }
+  
+  if (progressCleanup) {
+    progressCleanup()
+    progressCleanup = null
+  }
+})
+</script>
+
+<style scoped>
+.indexing-settings {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+/* 索引部分 - 使用标准的 setting-item 样式 */
+.indexing-section {
+  align-items: flex-start;
+}
+
+
+.indexing-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 12px;
+  width: 100%;
+  min-width: 0;
+}
+
+/* 进度条 */
+.progress-container {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 4px;
+  background: var(--chat-border, #333);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: var(--chat-accent, #3b82f6);
+  border-radius: 2px;
+  transition: width 0.3s ease;
+}
+
+.progress-text {
+  font-size: 13px;
+  color: var(--chat-text-muted, #888);
+}
+
+/* 统计信息 */
+.stats-info {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  padding: 8px 0;
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--chat-text-muted, #888);
+}
+
+/* 当前文件 */
+.current-file {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--chat-text-muted, #888);
+  padding: 6px 8px;
+  background: var(--chat-muted, #2a2a2a);
+  border-radius: 4px;
+  width: 100%;
+  min-width: 0;
+}
+
+.file-path {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+/* 操作按钮 */
+.action-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.action-buttons .edit-btn {
+  margin: 0;
+}
+
+.action-buttons .edit-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.action-buttons .delete-btn {
+  color: #ef4444;
+}
+
+.action-buttons .delete-btn:hover:not(:disabled) {
+  color: #ef4444;
+}
+
+.spinning {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 设置项 - 复用父组件的样式，但需要覆盖一些 */
+.indexing-settings .setting-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 0;
+  border-bottom: 1px solid var(--chat-border, #333);
+}
+
+.indexing-settings .setting-item:last-child {
+  border-bottom: none;
+}
+
+.indexing-settings .setting-info {
+  flex: 1;
+  margin-right: 24px;
+  min-width: 0;
+}
+
+.indexing-settings .setting-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--chat-text, #fff);
+  margin-bottom: 4px;
+}
+
+.indexing-settings .setting-description {
+  font-size: 13px;
+  color: var(--chat-text-muted, #888);
+  line-height: 1.5;
+  margin-bottom: 0;
+}
+
+.link-btn {
+  display: inline;
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: var(--chat-accent, #3b82f6);
+  cursor: pointer;
+  text-decoration: underline;
+  font-size: inherit;
+}
+
+.link-btn:hover {
+  color: var(--chat-accent-hover, #60a5fa);
+}
+
+.indexing-settings .setting-control {
+  flex-shrink: 0;
+}
+
+.edit-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  font-size: 13px;
+  font-weight: 500;
+  border: 1px solid var(--chat-border, #333);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--chat-text, #fff);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.edit-btn:hover {
+  background: var(--chat-muted, #2a2a2a);
+  border-color: var(--chat-border, #444);
+}
+</style>
+