work-agent 0.1.0

package/app/my/knowledge/[id]/page.tsx

@@ -0,0 +1,271 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useRouter, useParams } from 'next/navigation';
+import dynamic from 'next/dynamic';
+import { ArrowLeft, Eye, EyeOff, FileText } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { KnowledgeMetadataPanel } from '@/components/knowledge/KnowledgeMetadataPanel';
+import { KnowledgePreview } from '@/components/chat/KnowledgePreview';
+import type { KnowledgeType, KnowledgeSourceType } from '@/lib/db';
+import { KNOWLEDGE_SOURCE_LABELS } from '@/lib/knowledge-types';
+
+const MDEditor = dynamic(
+	() => import('@uiw/react-md-editor'),
+	{ ssr: false }
+);
+
+interface KnowledgeItem {
+	id: string;
+	title: string;
+	content: string;
+	category?: string;
+	tags?: string[];
+	author: string;
+	createdAt: Date;
+	updatedAt: Date;
+	type?: KnowledgeType;
+	sourceType?: KnowledgeSourceType;
+	sessionId?: string;
+	isActive?: boolean;
+}
+
+export default function KnowledgeDetailPage() {
+	const router = useRouter();
+	const params = useParams();
+	const knowledgeId = params.id as string;
+
+	const [knowledge, setKnowledge] = useState<KnowledgeItem | null>(null);
+	const [title, setTitle] = useState('');
+	const [content, setContent] = useState('');
+	const [category, setCategory] = useState('none');
+	const [tags, setTags] = useState<string[]>([]);
+	const [type, setType] = useState<KnowledgeType>('documentation');
+	const [isActive, setIsActive] = useState(true);
+	const [previewMode, setPreviewMode] = useState<'edit' | 'preview'>('edit');
+	const [saving, setSaving] = useState(false);
+	const [loading, setLoading] = useState(true);
+	const [lastSaved, setLastSaved] = useState<Date | null>(null);
+
+	const [categories, setCategories] = useState<string[]>([]);
+
+	useEffect(() => {
+		loadKnowledge();
+		loadCategories();
+	}, [knowledgeId]);
+
+	useEffect(() => {
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+				e.preventDefault();
+				handleSave();
+			}
+			if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+				e.preventDefault();
+				setPreviewMode(p => p === 'edit' ? 'preview' : 'edit');
+			}
+		};
+		window.addEventListener('keydown', handleKeyDown);
+		return () => window.removeEventListener('keydown', handleKeyDown);
+	}, [title, content, type, category, tags, isActive]);
+
+	const loadKnowledge = async () => {
+		setLoading(true);
+		try {
+			const response = await fetch(`/api/knowledge/${knowledgeId}`);
+			if (response.ok) {
+				const data = await response.json();
+				const item = data.document;
+				setKnowledge(item);
+				setTitle(item.title);
+				setContent(item.content || '');
+				setCategory(item.category || 'none');
+				setTags(item.tags || []);
+				setType(item.type || 'documentation');
+				setIsActive(item.isActive !== false);
+			} else {
+				alert('知识不存在');
+				router.push('/my/knowledge');
+			}
+		} catch (error) {
+			console.error('Failed to load knowledge:', error);
+			router.push('/my/knowledge');
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const loadCategories = async () => {
+		try {
+			const response = await fetch('/api/knowledge');
+			const data = await response.json();
+			const cats = Array.from(new Set(
+				data.documents
+					.map((d: KnowledgeItem) => d.category)
+					.filter(Boolean)
+			)) as string[];
+			setCategories(cats);
+		} catch (error) {
+			console.error('Failed to load categories:', error);
+		}
+	};
+
+	const handleSave = async () => {
+		if (!title.trim()) {
+			alert('请输入知识标题');
+			return;
+		}
+
+		setSaving(true);
+		try {
+			const response = await fetch(`/api/knowledge/${knowledgeId}`, {
+				method: 'PUT',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					title: title.trim(),
+					content,
+					category: category && category !== 'none' ? category : undefined,
+					tags: tags.length > 0 ? tags : undefined,
+					type,
+					isActive,
+				}),
+			});
+
+			if (response.ok) {
+				const data = await response.json();
+				setKnowledge(data.document);
+				setLastSaved(new Date());
+			} else {
+				const error = await response.json();
+				alert(error.error || '保存失败');
+			}
+		} catch (error) {
+			console.error('Failed to save knowledge:', error);
+			alert('保存失败');
+		} finally {
+			setSaving(false);
+		}
+	};
+
+	const handleDelete = async () => {
+		try {
+			const response = await fetch(`/api/knowledge/${knowledgeId}`, {
+				method: 'DELETE',
+			});
+
+			if (response.ok) {
+				router.push('/my/knowledge');
+			} else {
+				alert('删除失败');
+			}
+		} catch (error) {
+			console.error('Failed to delete knowledge:', error);
+			alert('删除失败');
+		}
+	};
+
+	const wordCount = content.trim() ? content.trim().split(/\s+/).length : 0;
+
+	if (loading) {
+		return (
+			<div className="h-full flex items-center justify-center">
+				<div className="text-muted-foreground">加载中...</div>
+			</div>
+		);
+	}
+
+	if (!knowledge) {
+		return (
+			<div className="h-full flex items-center justify-center">
+				<div className="text-muted-foreground">知识不存在</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="h-full flex flex-col bg-background">
+			<header className="bg-card border-b flex-shrink-0">
+				<div className="px-4 py-3 flex items-center justify-between gap-4">
+					<div className="flex items-center gap-3">
+						<Button variant="ghost" size="icon" asChild>
+							<a href="/my/knowledge">
+								<ArrowLeft className="h-5 w-5" />
+							</a>
+						</Button>
+						<div className="flex items-center gap-2">
+							<FileText className="h-5 w-5 text-muted-foreground" />
+							<span className="font-medium">知识编辑</span>
+						</div>
+					</div>
+					<div className="flex items-center gap-2">
+						<Button
+							variant="outline"
+							size="sm"
+							onClick={() => setPreviewMode(previewMode === 'edit' ? 'preview' : 'edit')}
+						>
+							{previewMode === 'edit' ? <Eye className="h-4 w-4 mr-1" /> : <EyeOff className="h-4 w-4 mr-1" />}
+							{previewMode === 'edit' ? '预览' : '编辑'}
+						</Button>
+						<Button onClick={handleSave} disabled={saving || !title.trim()}>
+							{saving ? '保存中...' : '保存'}
+						</Button>
+					</div>
+				</div>
+			</header>
+
+			<div className="flex-1 flex overflow-hidden">
+				<div className="flex-1 flex flex-col overflow-hidden">
+					<div className="flex-1 overflow-auto p-4">
+						{previewMode === 'preview' ? (
+							<KnowledgePreview
+								title={title}
+								content={content}
+								category={knowledge?.category}
+								tags={tags}
+								author={knowledge?.author || ''}
+								updatedAt={knowledge?.updatedAt ? new Date(knowledge.updatedAt).toISOString() : ''}
+								type={type}
+							/>
+						) : (
+							<div className="h-full max-w-6xl mx-auto" data-color-mode="light">
+								<MDEditor
+									value={content}
+									onChange={(val) => setContent(val || '')}
+									height="100%"
+									preview="live"
+									hideToolbar={false}
+									visibleDragbar={false}
+								/>
+							</div>
+						)}
+					</div>
+					<div className="flex-shrink-0 px-4 py-2 border-t bg-muted/30 text-xs text-muted-foreground flex items-center justify-between">
+						<span>字数: {wordCount}</span>
+						{lastSaved && <span>上次保存: {lastSaved.toLocaleTimeString('zh-CN')}</span>}
+					</div>
+				</div>
+
+				<KnowledgeMetadataPanel
+					title={title}
+					onTitleChange={setTitle}
+					type={type}
+					onTypeChange={setType}
+					category={category}
+					onCategoryChange={setCategory}
+					tags={tags}
+					onTagsChange={setTags}
+					isActive={isActive}
+					onIsActiveChange={setIsActive}
+					categories={categories}
+					onSave={handleSave}
+					onDelete={handleDelete}
+					saving={saving}
+					author={knowledge.author}
+					createdAt={knowledge.createdAt}
+					updatedAt={knowledge.updatedAt}
+					sourceType={knowledge.sourceType ? (KNOWLEDGE_SOURCE_LABELS[knowledge.sourceType] || knowledge.sourceType) : undefined}
+				/>
+			</div>
+		</div>
+	);
+}

package/app/my/knowledge/new/page.tsx

@@ -0,0 +1,234 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import dynamic from 'next/dynamic';
+import { ArrowLeft, Eye, EyeOff, FileText, CheckCircle, XCircle } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { KnowledgeMetadataPanel } from '@/components/knowledge/KnowledgeMetadataPanel';
+import type { KnowledgeType } from '@/lib/db';
+
+const MDEditor = dynamic(
+	() => import('@uiw/react-md-editor'),
+	{ ssr: false }
+);
+
+interface KnowledgeItem {
+	id: string;
+	title: string;
+	content: string;
+	category?: string;
+	tags?: string[];
+	author: string;
+	createdAt: Date;
+	updatedAt: Date;
+}
+
+export default function NewKnowledgePage() {
+	const router = useRouter();
+	const [title, setTitle] = useState('');
+	const [content, setContent] = useState('');
+	const [category, setCategory] = useState('none');
+	const [tags, setTags] = useState<string[]>([]);
+	const [type, setType] = useState<KnowledgeType>('documentation');
+	const [isActive, setIsActive] = useState(true);
+	const [previewMode, setPreviewMode] = useState<'edit' | 'preview'>('edit');
+	const [saving, setSaving] = useState(false);
+	const [saveStatus, setSaveStatus] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+	const [lastSaved, setLastSaved] = useState<Date | null>(null);
+
+	const [categories, setCategories] = useState<string[]>([]);
+
+	useEffect(() => {
+		loadCategories();
+		loadPendingKnowledge();
+	}, []);
+
+	const loadPendingKnowledge = () => {
+		try {
+			const pending = localStorage.getItem('pendingKnowledge');
+			if (pending) {
+				console.log('[NewKnowledge] Loading pending knowledge:', pending.substring(0, 200));
+				const data = JSON.parse(pending);
+				console.log('[NewKnowledge] Parsed data:', data);
+				setTitle(data.title || '');
+				setContent(data.content || '');
+				setCategory(data.category || 'none');
+				setTags(data.tags || []);
+				setType(data.type || 'documentation');
+				localStorage.removeItem('pendingKnowledge');
+			}
+		} catch (error) {
+			console.error('[NewKnowledge] Failed to load pending knowledge:', error);
+		}
+	};
+
+	useEffect(() => {
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+				e.preventDefault();
+				handleSave();
+			}
+			if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+				e.preventDefault();
+				setPreviewMode(p => p === 'edit' ? 'preview' : 'edit');
+			}
+		};
+		window.addEventListener('keydown', handleKeyDown);
+		return () => window.removeEventListener('keydown', handleKeyDown);
+	}, [title, content, type, category, tags, isActive]);
+
+	const loadCategories = async () => {
+		try {
+			const response = await fetch('/api/knowledge');
+			const data = await response.json();
+			const cats = Array.from(new Set(
+				data.documents
+					.map((d: KnowledgeItem) => d.category)
+					.filter(Boolean)
+			)) as string[];
+			setCategories(cats);
+		} catch (error) {
+			console.error('Failed to load categories:', error);
+		}
+	};
+
+	const handleSave = async () => {
+		if (!title.trim()) {
+			alert('请输入知识标题');
+			return;
+		}
+
+		const userId = localStorage.getItem('userId');
+		if (!userId) {
+			alert('未找到用户ID，请先登录');
+			return;
+		}
+
+		setSaving(true);
+		setSaveStatus(null);
+		try {
+			const response = await fetch('/api/knowledge', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					title: title.trim(),
+					content,
+					category: category && category !== 'none' ? category : undefined,
+					tags: tags.length > 0 ? tags : undefined,
+					author: userId,
+					type,
+					sourceType: 'manual',
+					isActive,
+				}),
+			});
+
+			if (response.ok) {
+				const data = await response.json();
+				setSaveStatus({ type: 'success', text: '保存成功！' });
+				setLastSaved(new Date());
+				setTimeout(() => {
+					router.push(`/my/knowledge/${data.document.id}`);
+				}, 800);
+			} else {
+				const error = await response.json();
+				setSaveStatus({ type: 'error', text: error.error || '保存失败' });
+			}
+		} catch (error) {
+			console.error('Failed to save knowledge:', error);
+			setSaveStatus({ type: 'error', text: '保存失败' });
+		} finally {
+			setSaving(false);
+		}
+	};
+
+	const wordCount = content.trim() ? content.trim().split(/\s+/).length : 0;
+
+	return (
+		<div className="h-full flex flex-col bg-background">
+			<header className="bg-card border-b flex-shrink-0">
+				<div className="px-4 py-3 flex items-center justify-between gap-4">
+					<div className="flex items-center gap-3">
+						<Button variant="ghost" size="icon" asChild>
+							<a href="/my/knowledge">
+								<ArrowLeft className="h-5 w-5" />
+							</a>
+						</Button>
+						<div className="flex items-center gap-2">
+							<FileText className="h-5 w-5 text-muted-foreground" />
+							<span className="font-medium">新建知识</span>
+						</div>
+					</div>
+					<div className="flex items-center gap-3">
+						{saveStatus && (
+							<div className={`flex items-center gap-1 text-sm ${saveStatus.type === 'success' ? 'text-green-600' : 'text-red-600'}`}>
+								{saveStatus.type === 'success' ? (
+									<CheckCircle className="h-4 w-4" />
+								) : (
+									<XCircle className="h-4 w-4" />
+								)}
+								{saveStatus.text}
+							</div>
+						)}
+						<Button
+							variant="outline"
+							size="sm"
+							onClick={() => setPreviewMode(previewMode === 'edit' ? 'preview' : 'edit')}
+						>
+							{previewMode === 'edit' ? <Eye className="h-4 w-4 mr-1" /> : <EyeOff className="h-4 w-4 mr-1" />}
+							{previewMode === 'edit' ? '预览' : '编辑'}
+						</Button>
+						<Button onClick={handleSave} disabled={saving || !title.trim()}>
+							{saving ? '保存中...' : '保存'}
+						</Button>
+					</div>
+				</div>
+			</header>
+
+			<div className="flex-1 flex overflow-hidden">
+				<div className="flex-1 flex flex-col overflow-hidden">
+					<div className="flex-1 overflow-auto p-4">
+						{previewMode === 'preview' ? (
+							<div className="max-w-4xl mx-auto prose prose-sm dark:prose-invert">
+								<h1>{title || '未命名知识'}</h1>
+								<div className="whitespace-pre-wrap">{content}</div>
+							</div>
+						) : (
+							<div className="h-full max-w-6xl mx-auto" data-color-mode="light">
+								<MDEditor
+									value={content}
+									onChange={(val) => setContent(val || '')}
+									height="100%"
+									preview="live"
+									hideToolbar={false}
+									visibleDragbar={false}
+								/>
+							</div>
+						)}
+					</div>
+					<div className="flex-shrink-0 px-4 py-2 border-t bg-muted/30 text-xs text-muted-foreground flex items-center justify-between">
+						<span>字数: {wordCount}</span>
+						{lastSaved && <span>上次保存: {lastSaved.toLocaleTimeString('zh-CN')}</span>}
+					</div>
+				</div>
+
+				<KnowledgeMetadataPanel
+					title={title}
+					onTitleChange={setTitle}
+					type={type}
+					onTypeChange={setType}
+					category={category}
+					onCategoryChange={setCategory}
+					tags={tags}
+					onTagsChange={setTags}
+					isActive={isActive}
+					onIsActiveChange={setIsActive}
+					categories={categories}
+					onSave={handleSave}
+					showDelete={false}
+					saving={saving}
+				/>
+			</div>
+		</div>
+	);
+}