625 lines
22 KiB
TypeScript
625 lines
22 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useCallback } from "react";
|
||
import {
|
||
Card,
|
||
CardContent,
|
||
CardDescription,
|
||
CardFooter,
|
||
CardHeader,
|
||
CardTitle,
|
||
} from "@/components/ui/card";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Label } from "@/components/ui/label";
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from "@/components/ui/dialog";
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from "@/components/ui/select";
|
||
import {
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableHead,
|
||
TableHeader,
|
||
TableRow,
|
||
} from "@/components/ui/table";
|
||
import {
|
||
BookOpen,
|
||
Plus,
|
||
Trash2,
|
||
Search,
|
||
FileText,
|
||
Link,
|
||
Type,
|
||
AlertCircle,
|
||
Loader2,
|
||
} from "lucide-react";
|
||
import {
|
||
knowledgeApi,
|
||
type KnowledgeBase,
|
||
type KnowledgeDocument,
|
||
} from "@/lib/api";
|
||
import { useApi } from "@/lib/hooks/use-api";
|
||
import { LoadingState, ErrorState } from "@/components/ui/api-states";
|
||
|
||
// ── 状态 Badge ─────────────────────────────────────────────────────────────────
|
||
|
||
function StatusBadge({ status }: { status: string }) {
|
||
switch (status) {
|
||
case "processing":
|
||
return <Badge variant="warning">处理中</Badge>;
|
||
case "ready":
|
||
return <Badge variant="success">就绪</Badge>;
|
||
case "failed":
|
||
return <Badge variant="destructive">失败</Badge>;
|
||
case "active":
|
||
return <Badge variant="success">活跃</Badge>;
|
||
default:
|
||
return <Badge variant="secondary">{status}</Badge>;
|
||
}
|
||
}
|
||
|
||
function SourceTypeBadge({ type }: { type: string }) {
|
||
switch (type) {
|
||
case "text":
|
||
return (
|
||
<Badge variant="outline" className="gap-1">
|
||
<Type className="h-3 w-3" />
|
||
文本
|
||
</Badge>
|
||
);
|
||
case "url":
|
||
return (
|
||
<Badge variant="outline" className="gap-1">
|
||
<Link className="h-3 w-3" />
|
||
URL
|
||
</Badge>
|
||
);
|
||
case "markdown":
|
||
return (
|
||
<Badge variant="outline" className="gap-1">
|
||
<FileText className="h-3 w-3" />
|
||
Markdown
|
||
</Badge>
|
||
);
|
||
default:
|
||
return <Badge variant="outline">{type}</Badge>;
|
||
}
|
||
}
|
||
|
||
// ── 空状态组件 ─────────────────────────────────────────────────────────────────
|
||
|
||
function EmptyState({ onCreateClick }: { onCreateClick: () => void }) {
|
||
return (
|
||
<div className="text-center py-16">
|
||
<BookOpen className="h-12 w-12 mx-auto text-gray-300" />
|
||
<h3 className="mt-4 text-base font-semibold text-gray-900">还没有知识库</h3>
|
||
<p className="mt-2 text-sm text-gray-500 max-w-xs mx-auto">
|
||
创建您的第一个知识库，为AI内容生产提供精准的知识支撑
|
||
</p>
|
||
<Button variant="outline" className="mt-4" onClick={onCreateClick}>
|
||
<Plus className="h-4 w-4 mr-1.5" />
|
||
创建知识库
|
||
</Button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── 知识库卡片 + 展开文档列表 ────────────────────────────────────────────────────
|
||
|
||
function KnowledgeBaseCard({
|
||
kb,
|
||
isExpanded,
|
||
onToggle,
|
||
onDelete,
|
||
onUpload,
|
||
}: {
|
||
kb: KnowledgeBase;
|
||
isExpanded: boolean;
|
||
onToggle: () => void;
|
||
onDelete: (id: string) => void;
|
||
onUpload: (id: string) => void;
|
||
}) {
|
||
const docsUrl = isExpanded ? `/api/v1/knowledge/bases/${kb.id}/documents` : null;
|
||
const { data: documents = [], isLoading: docsLoading, error: docsApiError, refresh: refreshDocs } =
|
||
useApi<KnowledgeDocument[]>(docsUrl);
|
||
const docsError = docsApiError?.message ?? null;
|
||
|
||
const handleDeleteDoc = async (docId: string) => {
|
||
try {
|
||
await knowledgeApi.deleteDocument(undefined, kb.id, docId);
|
||
refreshDocs();
|
||
} catch (err) {
|
||
console.error("Delete doc error:", err);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-3">
|
||
<Card className="cursor-pointer rounded-xl border border-gray-200" onClick={onToggle}>
|
||
<CardHeader className="pb-3">
|
||
<CardTitle className="text-base text-gray-900">{kb.name}</CardTitle>
|
||
{kb.description && (
|
||
<CardDescription className="line-clamp-2 text-gray-500">{kb.description}</CardDescription>
|
||
)}
|
||
</CardHeader>
|
||
<CardFooter className="pt-0 flex items-center justify-between">
|
||
<div className="flex items-center gap-2">
|
||
<Badge variant="secondary" className="gap-1">
|
||
<FileText className="h-3 w-3" />
|
||
{kb.document_count} 文档
|
||
</Badge>
|
||
<StatusBadge status={kb.status} />
|
||
</div>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon-sm"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
onDelete(kb.id);
|
||
}}
|
||
>
|
||
<Trash2 className="h-4 w-4 text-muted-foreground hover:text-destructive" />
|
||
</Button>
|
||
</CardFooter>
|
||
</Card>
|
||
|
||
{isExpanded && (
|
||
<Card className="rounded-xl border border-gray-200">
|
||
<CardContent className="p-4">
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h4 className="text-sm font-semibold">文档列表</h4>
|
||
<Button variant="outline" size="sm" onClick={() => onUpload(kb.id)}>
|
||
<Plus className="h-3.5 w-3.5 mr-1" />
|
||
上传文档
|
||
</Button>
|
||
</div>
|
||
|
||
{docsLoading ? (
|
||
<div className="flex items-center justify-center py-6 text-sm text-muted-foreground gap-2">
|
||
<Loader2 className="h-4 w-4 animate-spin" />
|
||
加载中...
|
||
</div>
|
||
) : docsError ? (
|
||
<div className="flex items-center gap-2 py-4 text-xs text-red-600">
|
||
<AlertCircle className="h-3.5 w-3.5" />
|
||
{docsError}
|
||
</div>
|
||
) : documents.length === 0 ? (
|
||
<p className="text-sm text-muted-foreground text-center py-6">
|
||
暂无文档，点击上方按钮上传
|
||
</p>
|
||
) : (
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead>标题</TableHead>
|
||
<TableHead>来源</TableHead>
|
||
<TableHead>状态</TableHead>
|
||
<TableHead className="text-right">分块数</TableHead>
|
||
<TableHead className="text-right">操作</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{documents.map((doc) => (
|
||
<TableRow key={doc.id}>
|
||
<TableCell className="font-medium">{doc.title}</TableCell>
|
||
<TableCell>
|
||
<SourceTypeBadge type={doc.source_type} />
|
||
</TableCell>
|
||
<TableCell>
|
||
<StatusBadge status={doc.status} />
|
||
</TableCell>
|
||
<TableCell className="text-right">{doc.chunk_count}</TableCell>
|
||
<TableCell className="text-right">
|
||
<Button
|
||
variant="ghost"
|
||
size="icon-sm"
|
||
onClick={() => handleDeleteDoc(doc.id)}
|
||
>
|
||
<Trash2 className="h-3.5 w-3.5 text-muted-foreground hover:text-destructive" />
|
||
</Button>
|
||
</TableCell>
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── 主页面 ─────────────────────────────────────────────────────────────────────
|
||
|
||
export default function KnowledgePage() {
|
||
const [activeTab, setActiveTab] = useState("enterprise");
|
||
const [searchQuery, setSearchQuery] = useState("");
|
||
const [expandedKbId, setExpandedKbId] = useState<string | null>(null);
|
||
|
||
// SWR data fetching
|
||
const {
|
||
data: enterpriseBases = [],
|
||
isLoading: enterpriseLoading,
|
||
error: enterpriseError,
|
||
mutate: mutateEnterprise,
|
||
} = useApi<KnowledgeBase[]>("/api/v1/knowledge/bases/?type=enterprise");
|
||
|
||
const {
|
||
data: industryBases = [],
|
||
isLoading: industryLoading,
|
||
error: industryError,
|
||
} = useApi<KnowledgeBase[]>("/api/v1/knowledge/bases/?type=industry");
|
||
|
||
const loading = enterpriseLoading || industryLoading;
|
||
const error = enterpriseError?.message || industryError?.message || null;
|
||
|
||
// Create KB dialog
|
||
const [createDialogOpen, setCreateDialogOpen] = useState(false);
|
||
const [newKbName, setNewKbName] = useState("");
|
||
const [newKbDescription, setNewKbDescription] = useState("");
|
||
const [createLoading, setCreateLoading] = useState(false);
|
||
const [createError, setCreateError] = useState<string | null>(null);
|
||
|
||
// Upload doc dialog
|
||
const [uploadDialogOpen, setUploadDialogOpen] = useState(false);
|
||
const [uploadKbId, setUploadKbId] = useState<string | null>(null);
|
||
const [docTitle, setDocTitle] = useState("");
|
||
const [docSourceType, setDocSourceType] = useState<"text" | "url" | "markdown">("text");
|
||
const [docContent, setDocContent] = useState("");
|
||
const [docUrl, setDocUrl] = useState("");
|
||
const [uploadLoading, setUploadLoading] = useState(false);
|
||
const [uploadError, setUploadError] = useState<string | null>(null);
|
||
|
||
const fetchBases = useCallback(() => {
|
||
mutateEnterprise();
|
||
}, [mutateEnterprise]);
|
||
|
||
const currentBases = activeTab === "enterprise" ? enterpriseBases : industryBases;
|
||
const filteredBases = searchQuery
|
||
? currentBases.filter(
|
||
(kb) =>
|
||
kb.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||
kb.description?.toLowerCase().includes(searchQuery.toLowerCase())
|
||
)
|
||
: currentBases;
|
||
|
||
const handleCreateKb = async () => {
|
||
if (!newKbName.trim()) return;
|
||
try {
|
||
setCreateLoading(true);
|
||
setCreateError(null);
|
||
await knowledgeApi.createBase(undefined, {
|
||
name: newKbName.trim(),
|
||
type: "enterprise",
|
||
description: newKbDescription.trim() || undefined,
|
||
});
|
||
mutateEnterprise();
|
||
setCreateDialogOpen(false);
|
||
setNewKbName("");
|
||
setNewKbDescription("");
|
||
} catch (err) {
|
||
setCreateError(err instanceof Error ? err.message : "创建失败");
|
||
} finally {
|
||
setCreateLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleDeleteKb = async (kbId: string) => {
|
||
try {
|
||
await knowledgeApi.deleteBase(undefined, kbId);
|
||
mutateEnterprise();
|
||
if (expandedKbId === kbId) setExpandedKbId(null);
|
||
} catch (err) {
|
||
console.error("Delete KB error:", err);
|
||
}
|
||
};
|
||
|
||
const handleUploadDoc = async () => {
|
||
if (!uploadKbId || !docTitle.trim()) return;
|
||
try {
|
||
setUploadLoading(true);
|
||
setUploadError(null);
|
||
await knowledgeApi.uploadDocument(undefined, uploadKbId, {
|
||
title: docTitle.trim(),
|
||
source_type: docSourceType,
|
||
content: docSourceType !== "url" ? docContent : undefined,
|
||
source_url: docSourceType === "url" ? docUrl : undefined,
|
||
});
|
||
mutateEnterprise();
|
||
setUploadDialogOpen(false);
|
||
setDocTitle("");
|
||
setDocContent("");
|
||
setDocUrl("");
|
||
setDocSourceType("text");
|
||
} catch (err) {
|
||
setUploadError(err instanceof Error ? err.message : "上传失败");
|
||
} finally {
|
||
setUploadLoading(false);
|
||
}
|
||
};
|
||
|
||
const openUploadDialog = (kbId: string) => {
|
||
setUploadKbId(kbId);
|
||
setUploadError(null);
|
||
setUploadDialogOpen(true);
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="space-y-6">
|
||
<div className="mb-8">
|
||
<h1 className="text-2xl font-bold text-gray-900">知识库</h1>
|
||
<p className="mt-1 text-sm text-gray-500">管理行业和企业知识，为AI内容生产提供智能支撑</p>
|
||
</div>
|
||
<LoadingState rows={3} grid cols={3} rowHeight="h-40" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
{/* 页面标题 */}
|
||
<div className="mb-8">
|
||
<h1 className="text-2xl font-bold text-gray-900">知识库</h1>
|
||
<p className="mt-1 text-sm text-gray-500">
|
||
管理行业和企业知识，为AI内容生产提供智能支撑
|
||
</p>
|
||
</div>
|
||
|
||
{/* Error Banner */}
|
||
{error && (
|
||
<ErrorState error={error} onRetry={fetchBases} />
|
||
)}
|
||
|
||
{/* Tab 切换 */}
|
||
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
||
<TabsList>
|
||
<TabsTrigger value="enterprise">
|
||
企业知识库 ({enterpriseBases.length})
|
||
</TabsTrigger>
|
||
<TabsTrigger value="industry">
|
||
行业知识库 ({industryBases.length})
|
||
</TabsTrigger>
|
||
</TabsList>
|
||
|
||
{/* ── 企业知识库 ── */}
|
||
<TabsContent value="enterprise">
|
||
<div className="flex items-center justify-between gap-4 mb-6">
|
||
<div className="relative flex-1 max-w-sm">
|
||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||
<Input
|
||
placeholder="搜索知识库..."
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
className="pl-9"
|
||
/>
|
||
</div>
|
||
<Button variant="outline" onClick={() => { setCreateError(null); setCreateDialogOpen(true); }}>
|
||
<Plus className="h-4 w-4 mr-1.5" />
|
||
创建知识库
|
||
</Button>
|
||
</div>
|
||
|
||
{filteredBases.length === 0 ? (
|
||
<EmptyState onCreateClick={() => setCreateDialogOpen(true)} />
|
||
) : (
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||
{filteredBases.map((kb) => (
|
||
<KnowledgeBaseCard
|
||
key={kb.id}
|
||
kb={kb}
|
||
isExpanded={expandedKbId === kb.id}
|
||
onToggle={() => setExpandedKbId(expandedKbId === kb.id ? null : kb.id)}
|
||
onDelete={handleDeleteKb}
|
||
onUpload={openUploadDialog}
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
</TabsContent>
|
||
|
||
{/* ── 行业知识库 ── */}
|
||
<TabsContent value="industry">
|
||
<div className="mb-4">
|
||
<p className="text-sm text-muted-foreground">
|
||
行业知识库由平台统一维护，提供行业级知识支撑
|
||
</p>
|
||
</div>
|
||
|
||
{filteredBases.length === 0 ? (
|
||
<div className="text-center py-16">
|
||
<BookOpen className="h-12 w-12 mx-auto text-gray-300" />
|
||
<p className="mt-4 text-sm text-gray-500">暂无行业知识库</p>
|
||
</div>
|
||
) : (
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||
{filteredBases.map((kb) => (
|
||
<Card key={kb.id} className="rounded-xl border border-gray-200">
|
||
<CardHeader className="pb-3">
|
||
<div className="flex items-center gap-2">
|
||
<CardTitle className="text-base text-gray-900">{kb.name}</CardTitle>
|
||
<Badge variant="info" className="text-[10px]">平台维护</Badge>
|
||
</div>
|
||
{kb.description && (
|
||
<CardDescription className="line-clamp-2">{kb.description}</CardDescription>
|
||
)}
|
||
</CardHeader>
|
||
<CardFooter className="pt-0">
|
||
<div className="flex items-center gap-2">
|
||
<Badge variant="secondary" className="gap-1">
|
||
<FileText className="h-3 w-3" />
|
||
{kb.document_count} 文档
|
||
</Badge>
|
||
<StatusBadge status={kb.status} />
|
||
</div>
|
||
</CardFooter>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
)}
|
||
</TabsContent>
|
||
</Tabs>
|
||
|
||
{/* ── 创建知识库 Dialog ── */}
|
||
<Dialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
|
||
<DialogContent>
|
||
<DialogHeader>
|
||
<DialogTitle>创建知识库</DialogTitle>
|
||
<DialogDescription>
|
||
创建企业专属知识库，为AI内容生产提供精准知识支撑
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
<div className="space-y-4 py-2">
|
||
{createError && (
|
||
<div className="flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-600">
|
||
<AlertCircle className="h-3.5 w-3.5 shrink-0" />
|
||
{createError}
|
||
</div>
|
||
)}
|
||
<div className="space-y-2">
|
||
<Label htmlFor="kb-name">名称</Label>
|
||
<Input
|
||
id="kb-name"
|
||
placeholder="输入知识库名称"
|
||
value={newKbName}
|
||
onChange={(e) => setNewKbName(e.target.value)}
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="kb-desc">描述</Label>
|
||
<textarea
|
||
id="kb-desc"
|
||
className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 hover:border-primary/40 transition-colors resize-none"
|
||
placeholder="描述知识库的用途和内容范围（可选）"
|
||
value={newKbDescription}
|
||
onChange={(e) => setNewKbDescription(e.target.value)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={() => setCreateDialogOpen(false)} disabled={createLoading}>
|
||
取消
|
||
</Button>
|
||
<Button onClick={handleCreateKb} disabled={!newKbName.trim() || createLoading}>
|
||
{createLoading ? (
|
||
<><Loader2 className="mr-2 h-4 w-4 animate-spin" />创建中...</>
|
||
) : (
|
||
"创建"
|
||
)}
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
{/* ── 上传文档 Dialog ── */}
|
||
<Dialog open={uploadDialogOpen} onOpenChange={setUploadDialogOpen}>
|
||
<DialogContent>
|
||
<DialogHeader>
|
||
<DialogTitle>上传文档</DialogTitle>
|
||
<DialogDescription>
|
||
向知识库添加文本内容或URL，系统将自动解析和分块
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
<div className="space-y-4 py-2">
|
||
{uploadError && (
|
||
<div className="flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-600">
|
||
<AlertCircle className="h-3.5 w-3.5 shrink-0" />
|
||
{uploadError}
|
||
</div>
|
||
)}
|
||
<div className="space-y-2">
|
||
<Label htmlFor="doc-title">标题</Label>
|
||
<Input
|
||
id="doc-title"
|
||
placeholder="输入文档标题"
|
||
value={docTitle}
|
||
onChange={(e) => setDocTitle(e.target.value)}
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>来源类型</Label>
|
||
<Select
|
||
value={docSourceType}
|
||
onValueChange={(v) => setDocSourceType(v as "text" | "url" | "markdown")}
|
||
>
|
||
<SelectTrigger>
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="text">文本</SelectItem>
|
||
<SelectItem value="url">URL</SelectItem>
|
||
<SelectItem value="markdown">Markdown</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
{docSourceType === "url" ? (
|
||
<div className="space-y-2">
|
||
<Label htmlFor="doc-url">URL 地址</Label>
|
||
<Input
|
||
id="doc-url"
|
||
placeholder="https://example.com/article"
|
||
value={docUrl}
|
||
onChange={(e) => setDocUrl(e.target.value)}
|
||
/>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-2">
|
||
<Label htmlFor="doc-content">
|
||
{docSourceType === "markdown" ? "Markdown 内容" : "文本内容"}
|
||
</Label>
|
||
<textarea
|
||
id="doc-content"
|
||
className="flex min-h-[120px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 hover:border-primary/40 transition-colors resize-none"
|
||
placeholder={
|
||
docSourceType === "markdown"
|
||
? "输入 Markdown 格式的内容..."
|
||
: "输入纯文本内容..."
|
||
}
|
||
value={docContent}
|
||
onChange={(e) => setDocContent(e.target.value)}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={() => setUploadDialogOpen(false)} disabled={uploadLoading}>
|
||
取消
|
||
</Button>
|
||
<Button
|
||
onClick={handleUploadDoc}
|
||
disabled={
|
||
!docTitle.trim() ||
|
||
(docSourceType === "url" ? !docUrl.trim() : !docContent.trim()) ||
|
||
uploadLoading
|
||
}
|
||
>
|
||
{uploadLoading ? (
|
||
<><Loader2 className="mr-2 h-4 w-4 animate-spin" />上传中...</>
|
||
) : (
|
||
"上传"
|
||
)}
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
);
|
||
}
|