Add and update frontend files

2026-03-14 15:52:27 +08:00
parent fb9c0906b5
commit 6c0392426e
46 changed files with 12149 additions and 1 deletions
@@ -0,0 +1,120 @@
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Menu, LayoutDashboard, Plus, MoreVertical, User, MessageSquare, Search, PanelLeftClose, Wrench, Bot } from "lucide-react";
+import { useState } from "react";
+
+const threadItems = ["我叫", "年龄最大的是谁", "有哪些字段", "文件中有些什么字段"];
+
+function Section({
+  title,
+  count,
+  items,
+}: {
+  title: string;
+  count: number;
+  items: string[];
+}) {
+  return (
+    <div className="px-3 pt-6">
+      <div className="flex items-center justify-between mb-2 px-1">
+        <div className="text-xs font-semibold text-zinc-500 flex items-center gap-1 uppercase tracking-wider">
+          {title}
+          <span>({count})</span>
+        </div>
+      </div>
+      <div className="space-y-0.5 mt-2">
+        {items.map((item) => (
+          <button
+            key={item}
+            className="w-full h-9 px-2 text-left rounded-md text-[14px] text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 flex items-center justify-between group transition-colors"
+          >
+            <span className="truncate pr-2">{item}</span>
+            <MoreVertical className="h-4 w-4 text-zinc-400 opacity-0 group-hover:opacity-100 transition-opacity" />
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function SidebarBody() {
+  return (
+    <div className="h-full flex flex-col bg-zinc-50/30 border-r border-zinc-200">
+      {/* Header */}
+      <div className="h-14 px-4 flex items-center justify-between border-b border-zinc-100">
+        <div className="flex items-center gap-1.5 text-zinc-700 font-bold text-lg">
+          <span className="text-xl leading-none mr-0.5">🦞</span>
+          <span className="bg-clip-text text-transparent bg-gradient-to-r from-zinc-800 to-zinc-600">
+            龙虾问数
+          </span>
+        </div>
+        <div className="flex items-center gap-1">
+          <Button variant="ghost" size="icon" className="h-8 w-8 text-zinc-400 hover:text-zinc-600">
+            <Search className="h-4.5 w-4.5" />
+          </Button>
+        </div>
+      </div>
+
+      <div className="px-3 pt-4 space-y-2">
+        <Button
+          variant="secondary"
+          className="w-full justify-start h-10 px-3 rounded-lg bg-zinc-200/50 hover:bg-zinc-200 text-zinc-900 font-medium"
+        >
+          <LayoutDashboard className="h-4.5 w-4.5 mr-2 text-zinc-600" />
+          Dashboard
+        </Button>
+        
+        <Button 
+          variant="outline" 
+          className="w-full justify-start h-10 px-3 rounded-lg border-zinc-200 bg-white hover:bg-zinc-50 text-zinc-600 shadow-sm font-medium"
+        >
+          <Plus className="h-4 w-4 mr-2" />
+          New Thread
+        </Button>
+      </div>
+
+      <ScrollArea className="flex-1">
+        <Section title="THREADS" count={threadItems.length} items={threadItems} />
+      </ScrollArea>
+
+      <div className="p-4 border-t border-zinc-200 mt-auto">
+        <div className="flex items-center justify-between text-zinc-600">
+          <button className="flex items-center gap-2 hover:text-zinc-900 transition-colors">
+            <div className="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 border border-indigo-200">
+              <User className="h-4.5 w-4.5" />
+            </div>
+          </button>
+          
+          <button className="flex items-center gap-1.5 text-sm hover:text-zinc-900 transition-colors px-2 py-1.5 rounded-md hover:bg-zinc-100">
+            <Wrench className="h-4 w-4" />
+            技能中心
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function Sidebar() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Sheet open={isOpen} onOpenChange={setIsOpen}>
+        <SheetTrigger render={
+          <Button variant="ghost" size="icon" className="md:hidden fixed top-3 left-3 z-50 border border-zinc-200 bg-white">
+            <Menu className="h-5 w-5" />
+          </Button>
+        } />
+        <SheetContent side="left" className="w-[280px] p-0">
+          <SidebarBody />
+        </SheetContent>
+      </Sheet>
+
+      <div className="hidden md:flex w-[280px] h-screen shrink-0">
+        <SidebarBody />
+      </div>
+    </>
+  );
+}