chore: import upstream snapshot with attribution

2026-07-13 12:21:01 +08:00
commit 05fcd08057
1298 changed files with 194683 additions and 0 deletions
@@ -0,0 +1,125 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { getNavigation } from "@/constants/docsConfig";
+import { DEFAULT_LANG } from "@/constants/languages";
+import { ChevronDown, ChevronRight, BookOpen, Rocket, Terminal, Monitor, HelpCircle, MessageCircle, Layers, Plug, Cloud, Zap, Wallet, Gift, GitBranch, BarChart3, Code2, Sparkles, Server } from "lucide-react";
+
+// Icons keyed by structural key (language-independent)
+const SECTION_ICONS = {
+  gettingStarted: Rocket,
+  providers: Layers,
+  features: Zap,
+  integration: Plug,
+  deployment: Cloud,
+  help: HelpCircle
+};
+
+const ITEM_ICONS = {
+  introduction: BookOpen,
+  quickStart: Rocket,
+  installation: Terminal,
+  subscription: Sparkles,
+  cheap: Wallet,
+  free: Gift,
+  smartRouting: GitBranch,
+  combos: Layers,
+  quotaTracking: BarChart3,
+  claudeCode: Code2,
+  codex: Code2,
+  cursor: Code2,
+  cline: Code2,
+  roo: Code2,
+  continue: Code2,
+  otherTools: Plug,
+  localhost: Monitor,
+  cloud: Server,
+  troubleshooting: HelpCircle,
+  faq: MessageCircle
+};
+
+export default function DocsSidebar({ isMobile = false, onClose, lang = DEFAULT_LANG }) {
+  const pathname = usePathname();
+  const navigation = getNavigation(lang);
+  const [openSections, setOpenSections] = useState(() => {
+    if (typeof window === "undefined") return [];
+    try {
+      return JSON.parse(sessionStorage.getItem("sidebarOpen") || "[]");
+    } catch { return []; }
+  });
+
+  useEffect(() => {
+    sessionStorage.setItem("sidebarOpen", JSON.stringify(openSections));
+  }, [openSections]);
+
+  const toggleSection = (index) => {
+    setOpenSections(prev =>
+      prev.includes(index)
+        ? prev.filter(i => i !== index)
+        : [...prev, index]
+    );
+  };
+
+  const buildHref = (slug) => (slug ? `/${lang}/${slug}` : `/${lang}`);
+  const isActive = (slug) => pathname === buildHref(slug);
+
+  const handleLinkClick = () => {
+    if (isMobile && onClose) onClose();
+  };
+
+  return (
+    <aside className={`${isMobile ? 'w-full' : 'w-64'} border-r bg-white border-gray-200 ${isMobile ? 'h-full' : 'h-[calc(100vh-4rem)] sticky top-16'} overflow-y-auto`}>
+      <nav className="p-4 space-y-6">
+        {navigation.map((section, sectionIndex) => {
+          const SectionIcon = SECTION_ICONS[section.key] || BookOpen;
+
+          return (
+            <div key={section.key}>
+              <button
+                onClick={() => toggleSection(sectionIndex)}
+                className="flex items-center justify-between w-full text-sm font-semibold text-gray-900 mb-2 hover:text-[#E68A6E] transition-colors"
+              >
+                <span className="flex items-center gap-2">
+                  <SectionIcon className="w-4 h-4" />
+                  {section.title}
+                </span>
+                {openSections.includes(sectionIndex) ? (
+                  <ChevronDown className="w-4 h-4" />
+                ) : (
+                  <ChevronRight className="w-4 h-4" />
+                )}
+              </button>
+
+              {openSections.includes(sectionIndex) && (
+                <ul className="space-y-1">
+                  {section.items.map((item) => {
+                    const ItemIcon = ITEM_ICONS[item.key] || BookOpen;
+
+                    return (
+                      <li key={item.key}>
+                        <Link
+                          href={buildHref(item.slug)}
+                          onClick={handleLinkClick}
+                          className={`flex items-center gap-2 px-3 py-2 text-sm rounded-lg transition-colors ${
+                            isActive(item.slug)
+                              ? "bg-[#E68A6E]/10 text-[#E68A6E] font-medium"
+                              : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+                          }`}
+                        >
+                          <ItemIcon className="w-4 h-4" />
+                          {item.title}
+                        </Link>
+                      </li>
+                    );
+                  })}
+                </ul>
+              )}
+            </div>
+          );
+        })}
+      </nav>
+    </aside>
+  );
+}