e.stopPropagation()}>

创建知识库

知识库名称 setName(e.target.value)} autoFocus /> 描述（可选）

setDesc(e.target.value)} rows={3} />
        </div>
        <div className="modal-footer">
          <button className="btn-cancel" onClick={onClose}>取消</button>
          <button className="btn-primary" onClick={handleSubmit} disabled={loading || !name.trim()}>
            {loading ? '创建中...' : '创建'}
          </button>
        </div>
      </div>
    </div>
  );
};

// ===== Modal for uploading document with progress =====
const UploadDocModal: React.FC<{
  kbId: string;
  kbName: string;
  onClose: () => void;
  onUpload: (baseId: string, filename: string, fileType: string, fileSize: number) => Promise<void>;
}> = ({ kbId, kbName, onClose, onUpload }) => {
  const [filename, setFilename] = useState('');
  const [fileType, setFileType] = useState('pdf');
  const [fileSize, setFileSize] = useState(102400);
  const [uploading, setUploading] = useState(false);
  const [progress, setProgress] = useState(0);
  const [selectedFile, setSelectedFile] = useState<File | null>(null);

const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      setSelectedFile(file);
      setFilename(file.name);
      const ext = file.name.split('.').pop()?.toLowerCase() || 'txt';
      setFileType(ext);
      setFileSize(file.size);
    }
  };

const handleSubmit = async () => {
    if (!filename.trim() || uploading) return;
    setUploading(true);
    setProgress(0);

const interval = setInterval(() => {
      setProgress(prev => {
        if (prev >= 90) return prev;
        return prev + Math.random() * 15 + 5;
      });
    }, 150);

try {
      const formData = new FormData();
      if (selectedFile) {
        formData.append('file', selectedFile);
      }
      formData.append('filename', filename.trim());
      formData.append('file_type', fileType);
      formData.append('file_size', String(fileSize));

const fileTypes = ['pdf', 'docx', 'doc', 'xlsx', 'xls', 'csv', 'md', 'txt', 'pptx'];

return (
    <div className="modal-overlay" onClick={uploading ? undefined : onClose}>
      <div className="modal-content" onClick={e => e.stopPropagation()}>
        <div className="modal-header">
          <h3>上传文档到「{kbName}」</h3>
          <button className="modal-close" onClick={onClose} disabled={uploading}><CloseIcon /></button>
        </div>
        <div className="modal-body">
          <label>选择文件</label>
          <input type="file" onChange={handleFileSelect} disabled={uploading} />
          <label>文件名</label>
          <input type="text" placeholder="文件名" value={filename} onChange={e => setFilename(e.target.value)} disabled={uploading} />
          <label>文件类型</label>
          <select value={fileType} onChange={e => setFileType(e.target.value)} disabled={uploading}>
            {fileTypes.map(ft => <option key={ft} value={ft}>{ft.toUpperCase()}</option>)}
          </select>

{/* Upload Progress Bar */}
          {uploading && (
            <div className="upload-progress-section">
              <div className="upload-progress-bar-track">
                <div
                  className="upload-progress-bar-fill"
                  style={{ width: `${Math.min(progress, 100)}%` }}
                />
              </div>
              <span className="upload-progress-text">{Math.min(Math.round(progress), 100)}%</span>
            </div>
          )}
        </div>
        <div className="modal-footer">
          <button className="btn-cancel" onClick={onClose} disabled={uploading}>取消</button>
          <button className="btn-primary" onClick={handleSubmit} disabled={uploading || !filename.trim()}>
            {uploading ? `上传中 ${Math.min(Math.round(progress), 100)}%` : '上传'}
          </button>
        </div>
      </div>
    </div>
  );
};

// ===== Modal for confirming knowledge base deletion =====
const DeleteKBModal: React.FC<{
  kbName: string;
  docCount: number;
  loading: boolean;
  onConfirm: () => void;
  onClose: () => void;
}> = ({ kbName, docCount, loading, onConfirm, onClose }) => {
  return (
    <div className="modal-overlay" onClick={loading ? undefined : onClose}>
      <div className="modal-content" onClick={e => e.stopPropagation()}>
        <div className="modal-header">
          <h3>删除知识库</h3>
          <button className="modal-close" onClick={onClose} disabled={loading}><CloseIcon /></button>
        </div>
        <div className="modal-body">
          <div className="delete-warning">
            <AlertTriangleIcon />
            <div className="delete-warning-text">
              <p className="delete-warning-title">确定要删除知识库「{kbName}」吗？</p>
              {docCount > 0 && (
                <p className="delete-warning-detail">
                  该知识库包含 {docCount} 个文档，删除后不可恢复。
                </p>
              )}
              {docCount === 0 && (
                <p className="delete-warning-detail">此操作不可撤销。</p>
              )}
            </div>
          </div>
        </div>
        <div className="modal-footer">
          <button className="btn-cancel" onClick={onClose} disabled={loading}>取消</button>
          <button className="btn-danger" onClick={onConfirm} disabled={loading}>
            {loading ? '删除中...' : '确认删除'}
          </button>
        </div>
      </div>
    </div>
  );
};

// ===== Document Row - backend-driven status display =====
const DocRow: React.FC<{
  doc: KnowledgeDoc;
  onDelete: () => void;
}> = ({ doc, onDelete }) => {
  const isCompleted = doc.status === 'completed';
  const isProcessing = doc.status === 'processing';
  const isFailed = doc.status === 'failed';

return (
    <tr className="doc-table-row">
      <td className="doc-table-cell doc-filename-cell">
        <FileIcon />
        <span className="doc-filename-text">{doc.filename}</span>
      </td>
      <td className="doc-table-cell">
        <span className={`doc-type-badge ${doc.file_type}`}>{getTypeLabel(doc.file_type)}</span>
      </td>
      <td className="doc-table-cell">{formatFileSize(doc.file_size)}</td>
      <td className="doc-table-cell">
        <div className="doc-status-cell">
          {isProcessing ? (
            <span className="doc-status-text processing">
              <ProcessingIcon />
              处理中...
            </span>
          ) : isCompleted ? (
            <span className="doc-status-badge completed">
              <CheckIcon />
              已完成
            </span>
          ) : isFailed ? (
            <span className="doc-status-badge failed">
              失败
            </span>
          ) : (
            <span className={`doc-status-badge ${doc.status}`}>
              {doc.status || '未知'}
            </span>
          )}
        </div>
      </td>
      <td className="doc-table-cell doc-actions-cell">
        <button
          className="doc-delete-btn"
          onClick={onDelete}
          title="删除文档"
        >
          <TrashIcon />
        </button>
      </td>
    </tr>
  );
};

// ===== Main KnowledgePage =====
const KnowledgePage: React.FC = () => {
  const [knowledgeBases, setKnowledgeBases] = useState<KnowledgeBase[]>([]);
  const [documents, setDocuments] = useState<Record<string, KnowledgeDoc[]>>({});
  const [expandedKb, setExpandedKb] = useState<string | null>(null);
  const [buildingKb, setBuildingKb] = useState<string | null>(null);
  const buildingKbRef = useRef<string | null>(null);
  const [buildMessage, setBuildMessage] = useState<string | null>(null);
  const [graphData, setGraphData] = useState<GraphData | null>(null);
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [uploadTargetKb, setUploadTargetKb] = useState<KnowledgeBase | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [storageUsed, setStorageUsed] = useState(0);
  const [storageLimit, setStorageLimit] = useState(0);
  const [membershipLevel, setMembershipLevel] = useState(0);

// Delete KB modal state
  const [deleteTargetKb, setDeleteTargetKb] = useState<KnowledgeBase | null>(null);
  const [deleteLoading, setDeleteLoading] = useState(false);

// Load knowledge bases
  const loadKnowledgeBases = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const res = await knowledgeAPI.getBases();
      if (res.code === 0) {
        const data: any = res.data;
        if (data && Array.isArray(data.bases)) {
          setKnowledgeBases(data.bases);
          setStorageUsed(data.storage_used || 0);
          setStorageLimit(data.storage_limit || 1073741824);
          setMembershipLevel(data.membership_level || 0);
        } else if (Array.isArray(data)) {
          // Legacy format fallback
          setKnowledgeBases(data);
        } else {
          setKnowledgeBases([]);
        }
      }
    } catch (e) {
      setError('加载知识库失败：' + (e as Error).message);
    } finally {
      setLoading(false);
    }
  }, []);

useEffect(() => {
    loadKnowledgeBases();
  }, [loadKnowledgeBases]);

// Load documents for a specific knowledge base
  const loadDocuments = useCallback(async (baseId: string) => {
    try {
      const res = await knowledgeAPI.getDocuments(baseId);
      if (res.code === 0) {
        setDocuments(prev => ({ ...prev, [baseId]: res.data || [] }));
      }
    } catch (e) {
      console.error('加载文档失败:', e);
    }
  }, []);

// Toggle expand
  const toggleExpand = async (kbId: string) => {
    if (expandedKb === kbId) {
      setExpandedKb(null);
      return;
    }
    setExpandedKb(kbId);
    if (!documents[kbId]) {
      await loadDocuments(kbId);
    }
  };

// Create knowledge base
  const handleCreateKB = async (name: string, desc: string) => {
    const res = await knowledgeAPI.createBase({ name, description: desc || undefined });
    if (res.code === 0) {
      await loadKnowledgeBases();
    }
  };

// Upload document
  const handleUploadDocument = async (baseId: string, filename: string, fileType: string, fileSize: number) => {
    const res = await knowledgeAPI.uploadDocument(baseId, {
      filename, file_type: fileType, file_size: fileSize,
    });
    if (res.code === 0) {
      await loadDocuments(baseId);
      await loadKnowledgeBases();
      // 不在这里清理 uploadTargetKb，由 UploadDocModal 内部控制关闭时机
      // （显示100%进度条800ms后再关闭）
    }
  };

// Delete document
  const handleDeleteDocument = async (baseId: string, docId: string) => {
    try {
      const res = await knowledgeAPI.deleteDocument(baseId, docId);
      if (res.code === 0) {
        await loadDocuments(baseId);
        await loadKnowledgeBases();
      }
    } catch (e) {
      alert('删除失败：' + (e as Error).message);
    }
  };

// Delete knowledge base - opens confirmation modal
  const handleDeleteKBClick = (kb: KnowledgeBase) => {
    setDeleteTargetKb(kb);
  };

// Build knowledge graph
  const handleBuildGraph = async (kbId: string) => {
    // Prevent re-entry if already building
    if (buildingKbRef.current) return;
    buildingKbRef.current = kbId;
    setBuildingKb(kbId);
    setBuildMessage(null);
    try {
      const res = await knowledgeAPI.buildGraph(kbId);
      if (res.code === 0) {
        setGraphData(res.data);
        await loadKnowledgeBases();
        if (documents[kbId]) {
          await loadDocuments(kbId);
        }
      } else {
        setBuildMessage('图谱构建失败：' + (res.message || '未知错误，code=' + res.code));
      }
    } catch (e: any) {
      let errMsg = '图谱构建失败';
      if (e.message) {
        errMsg += '：' + e.message;
      } else if (e.detail) {
        errMsg += '：' + e.detail;
      } else {
        errMsg += '：' + String(e);
      }
      setBuildMessage(errMsg);
    } finally {
      // Delay clearing building state to make the "构建中..." state visible
      setTimeout(() => {
        setBuildingKb(null);
        buildingKbRef.current = null;
      }, 600);
    }
  };

// Get graph for knowledge base
  const handleViewGraph = async (kbId: string) => {
    try {
      const res = await knowledgeAPI.getGraph(kbId);
      if (res.code === 0) {
        setGraphData(res.data);
      }
    } catch (e) {
      alert('获取图谱失败：' + (e as Error).message);
    }
  };

return (
    <div className="knowledge-page">
      <div className="knowledge-header">
        <div className="knowledge-header-left">
          <h1 className="knowledge-title">我的知识库</h1>
          <span className="knowledge-count">{knowledgeBases.length} 个知识库</span>
        </div>
        <div className="knowledge-header-right">
          {/* Storage Space Info */}
          <div className="storage-info">
            <span className="storage-label">存储空间</span>
            <div className="storage-bar-wrapper">
              <div className="storage-bar-track">
                <div
                  className="storage-bar-fill"
                  style={{ width: `${storageLimit > 0 ? Math.min((storageUsed / storageLimit) * 100, 100) : 0}%` }}
                />
              </div>
              <span className="storage-text">
                {formatFileSize(storageUsed)} / {formatFileSize(storageLimit)}
              </span>
            </div>
            <span className="storage-tier">
              {membershipLevel === 0 ? 'Free' : membershipLevel === 2 ? 'Pro' : membershipLevel === 3 ? 'Enterprise' : 'Free'}
            </span>
          </div>
          <button className="knowledge-upload-btn" onClick={() => setShowCreateModal(true)}>
            <AddIcon />
            <span>创建知识库</span>
          </button>
        </div>
      </div>

{error && (
        <div className="knowledge-error">
          <span>{error}</span>
          <button onClick={loadKnowledgeBases}>重试</button>
        </div>
      )}

{loading && knowledgeBases.length === 0 && (
        <div className="knowledge-loading">加载中...</div>
      )}

{!loading && knowledgeBases.length === 0 && !error && (
        <div className="knowledge-empty">
          <FolderIcon />
          <h3>暂无知识库</h3>
          <p>点击右上角"创建知识库"按钮开始使用</p>
          <button className="btn-primary" onClick={() => setShowCreateModal(true)}>创建知识库</button>
        </div>
      )}

<div className="knowledge-list">
        {knowledgeBases.map(kb => {
          const docs = documents[kb.id] || [];
          const isExpanded = expandedKb === kb.id;
          const isBuilding = buildingKb === kb.id;
          const hasGraph = (kb.knowledge_graph_count || 0) > 0;

return (
            <div key={kb.id} className={`knowledge-card ${isExpanded ? 'expanded' : ''}`}>
              <div className="knowledge-card-main" onClick={() => toggleExpand(kb.id)}>
                <div className="knowledge-card-icon">
                  <FolderIcon />
                </div>
                <div className="knowledge-card-info">
                  <h3 className="knowledge-card-name">{kb.name}</h3>
                  <p className="knowledge-card-desc">{kb.description || '暂无描述'}</p>
                </div>
                <div className="knowledge-card-meta">
                  <span className="knowledge-meta-item">
                    <FileIcon />
                    {kb.document_count || 0} 份文档
                  </span>
                  {hasGraph && (
                    <span className="knowledge-meta-item graph-indicator">
                      <GraphIcon />
                      {kb.knowledge_graph_count} 节点
                    </span>
                  )}
                </div>
                <div className={`knowledge-expand-indicator ${isExpanded ? 'open' : ''}`}>
                  <ChevronDownIcon />
                </div>
              </div>

{isExpanded && (
                <div className="knowledge-card-detail">
                  <div className="knowledge-docs">
                    <div className="knowledge-docs-header">
                      <span className="knowledge-docs-title">
                        文档列表 ({docs.length})
                      </span>
                      <div className="knowledge-docs-actions">
                        <button
                          className={`knowledge-graph-btn ${isBuilding ? 'building' : ''}`}
                          onClick={(e) => { e.stopPropagation(); handleBuildGraph(kb.id); }}
                          disabled={isBuilding}
                        >
                          <GraphIcon />
                          {isBuilding ? '构建中...' : '构建知识图谱'}
                        </button>
                        {hasGraph && !isBuilding && (
                          <button
                            className="knowledge-graph-btn view-graph"
                            onClick={(e) => { e.stopPropagation(); handleViewGraph(kb.id); }}
                          >
                            <GraphIcon />
                            查看图谱
                          </button>
                        )}
                        <button
                          className="knowledge-doc-upload-btn"
                          onClick={(e) => { e.stopPropagation(); setUploadTargetKb(kb); }}
                        >
                          <UploadIcon />
                          上传文档
                        </button>
                      </div>
                    </div>

{/* Build graph inline message */}
                    {buildMessage && (
                      <div className="build-message">{buildMessage}</div>
                    )}

{/* Table-form document list */}
                    <div className="knowledge-docs-table-wrapper">
                      {docs.length > 0 ? (
                        <table className="knowledge-docs-table">
                          <thead>
                            <tr className="doc-table-header-row">
                              <th className="doc-table-th">文件名</th>
                              <th className="doc-table-th">类型</th>
                              <th className="doc-table-th">大小</th>
                              <th className="doc-table-th">状态</th>
                              <th className="doc-table-th">操作</th>
                            </tr>
                          </thead>
                          <tbody>
                            {docs.map(doc => (
                              <DocRow
                                key={doc.id}
                                doc={doc}
                                onDelete={() => handleDeleteDocument(kb.id, doc.id)}
                              />
                            ))}
                          </tbody>
                        </table>
                      ) : (
                        <div className="knowledge-empty-docs">
                          暂未上传文档，请点击"上传文档"按钮添加
                        </div>
                      )}
                    </div>
                  </div>

{/* Expandable detail sidebar removed - footer spans full width */}
                  <div className="knowledge-card-footer">
                    <span className="knowledge-update-time">更新于 {formatDate(kb.updated_at)}</span>
                    <button
                      className="knowledge-delete-btn"
                      onClick={(e) => { e.stopPropagation(); handleDeleteKBClick(kb); }}
                    >
                      删除知识库
                    </button>
                  </div>
                </div>
              )}
            </div>
          );
        })}
      </div>

{/* Create Knowledge Base Modal */}
      {showCreateModal && (
        <CreateKBModal onClose={() => setShowCreateModal(false)} onCreate={handleCreateKB} />
      )}

{/* Upload Document Modal */}
      {uploadTargetKb && (
        <UploadDocModal
          kbId={uploadTargetKb.id}
          kbName={uploadTargetKb.name}
          onClose={() => setUploadTargetKb(null)}
          onUpload={handleUploadDocument}
        />
      )}

{/* Delete Knowledge Base Confirmation Modal */}
      {deleteTargetKb && (
        <DeleteKBModal
          kbName={deleteTargetKb.name}
          docCount={deleteTargetKb.document_count || 0}
          loading={deleteLoading}
          onConfirm={handleDeleteKBConfirm}
          onClose={() => { if (!deleteLoading) setDeleteTargetKb(null); }}
        />
      )}

{/* Knowledge Graph Visualization */}
      {graphData && (
        <KnowledgeGraphView graphData={graphData} onClose={() => setGraphData(null)} />
      )}
    </div>
  );
};

export default KnowledgePage;

知识图谱可视化

创建知识库