feat(frontend): Day 21 knowledge base management frontend completed

frontend/src/components/knowledge/KnowledgeBaseList.tsx

@@ -0,0 +1,203 @@
+import React from 'react';
+import { Card, Button, Empty, Tag, Popconfirm, Space, Typography } from 'antd';
+import { 
+  PlusOutlined, 
+  FolderOutlined, 
+  FileTextOutlined, 
+  EditOutlined, 
+  DeleteOutlined 
+} from '@ant-design/icons';
+import type { KnowledgeBase } from '../../api/knowledgeBaseApi';
+
+const { Title, Text, Paragraph } = Typography;
+
+interface KnowledgeBaseListProps {
+  knowledgeBases: KnowledgeBase[];
+  loading: boolean;
+  onCreateClick: () => void;
+  onEditClick: (kb: KnowledgeBase) => void;
+  onDeleteClick: (kb: KnowledgeBase) => void;
+  onSelectClick: (kb: KnowledgeBase) => void;
+}
+
+const KnowledgeBaseList: React.FC<KnowledgeBaseListProps> = ({
+  knowledgeBases,
+  loading,
+  onCreateClick,
+  onEditClick,
+  onDeleteClick,
+  onSelectClick,
+}) => {
+  const formatFileSize = (bytes: number): string => {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  const canCreateMore = knowledgeBases.length < 3;
+
+  return (
+    <div>
+      {/* 标题和创建按钮 */}
+      <div style={{ 
+        display: 'flex', 
+        justifyContent: 'space-between', 
+        alignItems: 'center',
+        marginBottom: 24 
+      }}>
+        <div>
+          <Title level={4} style={{ margin: 0 }}>我的知识库</Title>
+          <Text type="secondary">
+            已使用 {knowledgeBases.length}/3 个知识库
+          </Text>
+        </div>
+        <Button
+          type="primary"
+          icon={<PlusOutlined />}
+          onClick={onCreateClick}
+          disabled={!canCreateMore || loading}
+        >
+          创建知识库
+        </Button>
+      </div>
+
+      {/* 配额提示 */}
+      {!canCreateMore && (
+        <div style={{ marginBottom: 16 }}>
+          <Tag color="warning">
+            已达到知识库数量上限（3个）
+          </Tag>
+        </div>
+      )}
+
+      {/* 知识库列表 */}
+      {knowledgeBases.length === 0 ? (
+        <Card>
+          <Empty
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
+            description="还没有知识库，创建第一个吧！"
+          >
+            <Button 
+              type="primary" 
+              icon={<PlusOutlined />}
+              onClick={onCreateClick}
+            >
+              创建知识库
+            </Button>
+          </Empty>
+        </Card>
+      ) : (
+        <div style={{ 
+          display: 'grid', 
+          gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
+          gap: 16 
+        }}>
+          {knowledgeBases.map((kb) => (
+            <Card
+              key={kb.id}
+              hoverable
+              onClick={() => onSelectClick(kb)}
+              style={{ cursor: 'pointer' }}
+              actions={[
+                <Button
+                  key="edit"
+                  type="text"
+                  icon={<EditOutlined />}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onEditClick(kb);
+                  }}
+                >
+                  编辑
+                </Button>,
+                <Popconfirm
+                  key="delete"
+                  title="确认删除？"
+                  description={`删除知识库 "${kb.name}" 将同时删除其中的所有文档，此操作不可恢复。`}
+                  onConfirm={(e) => {
+                    e?.stopPropagation();
+                    onDeleteClick(kb);
+                  }}
+                  okText="确认"
+                  cancelText="取消"
+                  okButtonProps={{ danger: true }}
+                >
+                  <Button
+                    type="text"
+                    danger
+                    icon={<DeleteOutlined />}
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    删除
+                  </Button>
+                </Popconfirm>,
+              ]}
+            >
+              <Card.Meta
+                avatar={
+                  <div style={{ 
+                    width: 48, 
+                    height: 48, 
+                    background: '#1890ff20',
+                    borderRadius: 8,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                  }}>
+                    <FolderOutlined style={{ fontSize: 24, color: '#1890ff' }} />
+                  </div>
+                }
+                title={
+                  <div style={{ 
+                    display: 'flex', 
+                    alignItems: 'center', 
+                    justifyContent: 'space-between' 
+                  }}>
+                    <Text strong ellipsis style={{ flex: 1 }}>
+                      {kb.name}
+                    </Text>
+                  </div>
+                }
+                description={
+                  <div>
+                    <Paragraph 
+                      ellipsis={{ rows: 2 }} 
+                      type="secondary"
+                      style={{ marginBottom: 12, minHeight: 44 }}
+                    >
+                      {kb.description || '暂无描述'}
+                    </Paragraph>
+                    
+                    <Space direction="vertical" size={4} style={{ width: '100%' }}>
+                      <div style={{ display: 'flex', alignItems: 'center' }}>
+                        <FileTextOutlined style={{ marginRight: 8, color: '#8c8c8c' }} />
+                        <Text type="secondary" style={{ fontSize: 13 }}>
+                          {kb._count?.documents || kb.fileCount || 0} 个文档
+                        </Text>
+                      </div>
+                      <div style={{ display: 'flex', alignItems: 'center' }}>
+                        <Text type="secondary" style={{ fontSize: 13 }}>
+                          总大小: {formatFileSize(kb.totalSizeBytes)}
+                        </Text>
+                      </div>
+                      <div style={{ marginTop: 4 }}>
+                        <Text type="secondary" style={{ fontSize: 12 }}>
+                          创建于 {new Date(kb.createdAt).toLocaleDateString()}
+                        </Text>
+                      </div>
+                    </Space>
+                  </div>
+                }
+              />
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default KnowledgeBaseList;
+