work-agent 0.1.0

package/components/knowledge/KnowledgeMetadataPanel.tsx

@@ -0,0 +1,293 @@
+'use client';
+
+import { useState, KeyboardEvent } from 'react';
+import { X, Plus, Trash2, Save } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { Badge } from '@/components/ui/badge';
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from '@/components/ui/dialog';
+import type { KnowledgeType } from '@/lib/db';
+import { KNOWLEDGE_TYPE_LABELS } from '@/lib/knowledge-types';
+
+interface KnowledgeMetadataPanelProps {
+	title: string;
+	onTitleChange: (value: string) => void;
+	type: KnowledgeType;
+	onTypeChange: (value: KnowledgeType) => void;
+	category: string;
+	onCategoryChange: (value: string) => void;
+	tags: string[];
+	onTagsChange: (value: string[]) => void;
+	isActive: boolean;
+	onIsActiveChange: (value: boolean) => void;
+	categories: string[];
+	onSave: () => void;
+	onDelete?: () => void;
+	saving?: boolean;
+	showDelete?: boolean;
+	author?: string;
+	createdAt?: Date;
+	updatedAt?: Date;
+	sourceType?: string;
+}
+
+export function KnowledgeMetadataPanel({
+	title,
+	onTitleChange,
+	type,
+	onTypeChange,
+	category,
+	onCategoryChange,
+	tags,
+	onTagsChange,
+	isActive,
+	onIsActiveChange,
+	categories,
+	onSave,
+	onDelete,
+	saving,
+	showDelete = true,
+	author,
+	createdAt,
+	updatedAt,
+	sourceType,
+}: KnowledgeMetadataPanelProps) {
+	const [tagInput, setTagInput] = useState('');
+	const [newCategoryInput, setNewCategoryInput] = useState('');
+	const [newCategoryDialogOpen, setNewCategoryDialogOpen] = useState(false);
+
+	const handleTagInputKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+		if (e.key === 'Enter' || e.key === ',') {
+			e.preventDefault();
+			addTag();
+		}
+	};
+
+	const addTag = () => {
+		const newTag = tagInput.trim().replace(',', '');
+		if (newTag && !tags.includes(newTag)) {
+			onTagsChange([...tags, newTag]);
+		}
+		setTagInput('');
+	};
+
+	const removeTag = (tagToRemove: string) => {
+		onTagsChange(tags.filter(t => t !== tagToRemove));
+	};
+
+	const handleAddNewCategory = () => {
+		if (newCategoryInput.trim()) {
+			onCategoryChange(newCategoryInput.trim());
+			setNewCategoryInput('');
+			setNewCategoryDialogOpen(false);
+		}
+	};
+
+	return (
+		<div className="w-[300px] h-full bg-card border-l flex flex-col overflow-hidden">
+			<div className="p-4 border-b">
+				<h2 className="font-semibold text-lg">元数据</h2>
+			</div>
+
+			<div className="flex-1 overflow-y-auto p-4 space-y-5">
+				<div className="space-y-2">
+					<Label htmlFor="title" className="text-sm font-medium">
+						标题
+					</Label>
+					<Input
+						id="title"
+						type="text"
+						value={title}
+						onChange={(e) => onTitleChange(e.target.value)}
+						placeholder="知识标题..."
+						className="font-medium"
+					/>
+				</div>
+
+				<div className="space-y-2">
+					<Label htmlFor="type" className="text-sm font-medium">
+						类型
+					</Label>
+					<Select value={type} onValueChange={(v) => onTypeChange(v as KnowledgeType)}>
+						<SelectTrigger id="type">
+							<SelectValue placeholder="选择类型" />
+						</SelectTrigger>
+						<SelectContent>
+							{Object.entries(KNOWLEDGE_TYPE_LABELS).map(([value, label]) => (
+								<SelectItem key={value} value={value}>{label}</SelectItem>
+							))}
+						</SelectContent>
+					</Select>
+				</div>
+
+				<div className="space-y-2">
+					<Label htmlFor="category" className="text-sm font-medium">
+						分类
+					</Label>
+					<div className="flex gap-2">
+						<Select value={category} onValueChange={onCategoryChange}>
+							<SelectTrigger id="category" className="flex-1">
+								<SelectValue placeholder="选择分类" />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectItem value="none">无分类</SelectItem>
+								{categories.map(cat => (
+									<SelectItem key={cat} value={cat}>{cat}</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+						<Dialog open={newCategoryDialogOpen} onOpenChange={setNewCategoryDialogOpen}>
+							<DialogTrigger asChild>
+								<Button variant="outline" size="icon" title="新建分类">
+									<Plus className="h-4 w-4" />
+								</Button>
+							</DialogTrigger>
+							<DialogContent>
+								<DialogHeader>
+									<DialogTitle>新建分类</DialogTitle>
+									<DialogDescription>
+										输入新的分类名称
+									</DialogDescription>
+								</DialogHeader>
+								<div className="py-4">
+									<Input
+										value={newCategoryInput}
+										onChange={(e) => setNewCategoryInput(e.target.value)}
+										placeholder="分类名称..."
+										onKeyDown={(e) => e.key === 'Enter' && handleAddNewCategory()}
+									/>
+								</div>
+								<div className="flex justify-end gap-2">
+									<Button variant="outline" onClick={() => setNewCategoryDialogOpen(false)}>
+										取消
+									</Button>
+									<Button onClick={handleAddNewCategory}>
+										创建
+									</Button>
+								</div>
+							</DialogContent>
+						</Dialog>
+					</div>
+				</div>
+
+				<div className="space-y-2">
+					<Label className="text-sm font-medium">标签</Label>
+					<div className="flex flex-wrap gap-1.5 min-h-[32px]">
+						{tags.map(tag => (
+							<Badge
+								key={tag}
+								variant="secondary"
+								className="gap-1 pr-1 pl-2"
+							>
+								{tag}
+								<button
+									onClick={() => removeTag(tag)}
+									className="hover:bg-muted rounded p-0.5"
+								>
+									<X className="h-3 w-3" />
+								</button>
+							</Badge>
+						))}
+					</div>
+					<Input
+						type="text"
+						value={tagInput}
+						onChange={(e) => setTagInput(e.target.value)}
+						onKeyDown={handleTagInputKeyDown}
+						onBlur={addTag}
+						placeholder="输入标签，回车添加..."
+						className="text-sm"
+					/>
+				</div>
+
+				<div className="space-y-3 pt-2">
+					<div className="flex items-center justify-between">
+						<Label htmlFor="isActive" className="text-sm font-medium cursor-pointer">
+							启用状态
+						</Label>
+						<Switch
+							id="isActive"
+							checked={isActive}
+							onCheckedChange={onIsActiveChange}
+						/>
+					</div>
+					<p className="text-xs text-muted-foreground">
+						{isActive ? '知识已启用，可被 AI 检索使用' : '知识已停用，暂不参与检索'}
+					</p>
+				</div>
+
+				{(author || createdAt || updatedAt || sourceType) && (
+					<div className="space-y-2 pt-2 border-t">
+						<p className="text-xs text-muted-foreground">
+							{author && <span>作者: {author}</span>}
+						</p>
+						<p className="text-xs text-muted-foreground">
+							{createdAt && <span>创建于: {new Date(createdAt).toLocaleString('zh-CN')}</span>}
+						</p>
+						<p className="text-xs text-muted-foreground">
+							{updatedAt && <span>更新于: {new Date(updatedAt).toLocaleString('zh-CN')}</span>}
+						</p>
+						{sourceType && (
+							<Badge variant="outline" className="text-xs">
+								{sourceType}
+							</Badge>
+						)}
+					</div>
+				)}
+			</div>
+
+			<div className="p-4 border-t space-y-2">
+				<Button
+					onClick={onSave}
+					disabled={saving || !title.trim()}
+					className="w-full"
+				>
+					<Save className="h-4 w-4 mr-2" />
+					{saving ? '保存中...' : '保存知识'}
+				</Button>
+				{showDelete && onDelete && (
+					<Dialog>
+						<DialogTrigger asChild>
+							<Button variant="outline" size="sm" className="w-full text-destructive hover:text-destructive">
+								<Trash2 className="h-4 w-4 mr-2" />
+								删除知识
+							</Button>
+						</DialogTrigger>
+						<DialogContent>
+							<DialogHeader>
+								<DialogTitle>确认删除</DialogTitle>
+								<DialogDescription>
+									确定要删除知识 "{title}" 吗？此操作无法撤销。
+								</DialogDescription>
+							</DialogHeader>
+							<div className="flex justify-end gap-2 mt-4">
+								<Button variant="outline" onClick={() => {}}>
+									取消
+								</Button>
+								<Button variant="destructive" onClick={onDelete}>
+									删除
+								</Button>
+							</div>
+						</DialogContent>
+					</Dialog>
+				)}
+			</div>
+		</div>
+	);
+}

package/components/layout-wrapper.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { TopNav } from './top-nav';
+
+interface LayoutWrapperProps {
+	children: React.ReactNode;
+}
+
+export function LayoutWrapper({ children }: LayoutWrapperProps) {
+	return (
+		<div className="flex flex-col h-screen">
+			<TopNav />
+			<main className="flex-1 overflow-auto">
+				{children}
+			</main>
+		</div>
+	);
+}

package/components/mobile-layout.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { MessageSquare, ClipboardList, User } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+type Tab = 'chat' | 'tickets' | 'approvals' | 'profile';
+
+interface MobileLayoutProps {
+  children: React.ReactNode;
+  activeTab: Tab;
+  onTabChange: (tab: Tab) => void;
+}
+
+export function MobileLayout({ children, activeTab, onTabChange }: MobileLayoutProps) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const tabs: { id: Tab; label: string; icon: React.ElementType }[] = [
+    { id: 'chat', label: '对话', icon: MessageSquare },
+    { id: 'tickets', label: '工单', icon: ClipboardList },
+    { id: 'approvals', label: '审核', icon: ClipboardList },
+    { id: 'profile', label: '我的', icon: User },
+  ];
+
+  if (!mounted) {
+    return <div className="h-screen bg-background" />;
+  }
+
+  return (
+    <div className="h-[100dvh] flex flex-col bg-background overflow-hidden">
+      {/* 主内容区 */}
+      <main className="flex-1 overflow-hidden flex flex-col">
+        {children}
+      </main>
+
+      {/* 底部导航栏 */}
+      <nav className="bg-card border-t flex-shrink-0 pb-safe">
+        <div className="flex">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => onTabChange(tab.id)}
+              className={cn(
+                "flex-1 py-3 flex flex-col items-center gap-0.5 transition-colors",
+                activeTab === tab.id 
+                  ? "text-primary" 
+                  : "text-muted-foreground"
+              )}
+            >
+              <tab.icon className="h-5 w-5" />
+              <span className="text-xs">{tab.label}</span>
+            </button>
+          ))}
+        </div>
+      </nav>
+    </div>
+  );
+}