样式修改

2026-05-13 21:25:29 +08:00
1 parent 02111ab5b8
commit 1c2cf768f8
@@ -0,0 +1,116 @@
+import { NavLink, useLocation } from "react-router-dom";
+import {
+  ChevronLeft,
+  ChevronRight,
+  FileText,
+  LayoutDashboard,
+} from "lucide-react";
+
+const navItems = [
+  {
+    label: "Workspace",
+    to: "/page/workspace",
+    match: "/page/workspace",
+    icon: LayoutDashboard,
+  },
+];
+
+type PageSidebarProps = {
+  collapsed: boolean;
+  onToggleCollapsed: () => void;
+};
+
+export function PageSidebar({
+  collapsed,
+  onToggleCollapsed,
+}: PageSidebarProps) {
+  const location = useLocation();
+
+  const iconButtonClass =
+    "rounded-lg p-2 text-gray-500 transition-all duration-200 hover:bg-red-50 hover:text-red-600";
+
+  return (
+    <aside
+      className={`fixed left-0 top-0 z-40 h-screen overflow-y-auto border-r border-red-100 bg-white shadow-sm transition-all duration-300 ${
+        collapsed ? "w-16" : "w-64"
+      }`}
+    >
+      <div
+        className={`flex h-16 items-center border-b border-red-100 ${
+          collapsed ? "justify-center px-2" : "justify-between px-6"
+        }`}
+      >
+        <div className="flex min-w-0 items-center gap-3">
+          <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-red-500 to-red-400">
+            <FileText className="h-4 w-4 text-white" />
+          </div>
+          {!collapsed && (
+            <div>
+              <h1 className="text-sm font-semibold text-gray-900">
+                DeerFlow
+              </h1>
+              <p className="text-xs text-red-400/80">Page Navigation</p>
+            </div>
+          )}
+        </div>
+        {!collapsed && (
+          <button
+            type="button"
+            onClick={onToggleCollapsed}
+            className={iconButtonClass}
+            title="收起侧边栏"
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+
+      <nav className={`${collapsed ? "p-2" : "p-4"} space-y-2`}>
+        {collapsed && (
+          <button
+            type="button"
+            onClick={onToggleCollapsed}
+            className={`flex w-full items-center justify-center ${iconButtonClass}`}
+            title="展开侧边栏"
+          >
+            <ChevronRight className="h-5 w-5" />
+          </button>
+        )}
+
+        {navItems.map((item) => {
+          const Icon = item.icon;
+          const active = location.pathname.startsWith(item.match);
+
+          return (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              title={collapsed ? item.label : undefined}
+              className={`flex items-center rounded-lg py-2 transition-all duration-200 ${
+                collapsed ? "justify-center px-2" : "gap-2 px-3"
+              } ${
+                active
+                  ? "border border-red-200 bg-red-50 text-red-600"
+                  : "text-gray-600 hover:bg-red-50 hover:text-red-600"
+              }`}
+            >
+              <Icon
+                className={`h-5 w-5 flex-shrink-0 ${
+                  active ? "text-red-500" : ""
+                }`}
+              />
+              {!collapsed && (
+                <span className="flex-1 text-left text-sm font-medium">
+                  {item.label}
+                </span>
+              )}
+            </NavLink>
+          );
+        })}
+      </nav>
+
+      <div className="pointer-events-none absolute right-0 top-0 h-32 w-32 rounded-full bg-red-500/5 blur-3xl" />
+      <div className="pointer-events-none absolute bottom-20 right-0 h-24 w-24 rounded-full bg-red-400/5 blur-3xl" />
+    </aside>
+  );
+}