@allbluecn/web-app 0.4.9 → 0.4.11

package/src/components/hextaui/command-menu.tsx

@@ -0,0 +1,460 @@
+"use client";
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
+import { Search, X, Command, Option, ArrowBigUp, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Delete, Space } from "lucide-react";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+interface CommandMenuContextType {
+  value: string;
+  setValue: (value: string) => void;
+  selectedIndex: number;
+  setSelectedIndex: (index: number) => void;
+  scrollType?: "auto" | "always" | "scroll" | "hover";
+  scrollHideDelay?: number;
+}
+
+const CommandMenuContext = React.createContext<
+  CommandMenuContextType | undefined
+>(undefined);
+
+const CommandMenuProvider: React.FC<{
+  children: React.ReactNode;
+  value: string;
+  setValue: (value: string) => void;
+  selectedIndex: number;
+  setSelectedIndex: (index: number) => void;
+  scrollType?: "auto" | "always" | "scroll" | "hover";
+  scrollHideDelay?: number;
+}> = ({
+  children,
+  value,
+  setValue,
+  selectedIndex,
+  setSelectedIndex,
+  scrollType,
+  scrollHideDelay,
+}) => (
+  <CommandMenuContext.Provider
+    value={{
+      value,
+      setValue,
+      selectedIndex,
+      setSelectedIndex,
+      scrollType,
+      scrollHideDelay,
+    }}
+  >
+    {children}
+  </CommandMenuContext.Provider>
+);
+
+const useCommandMenu = () => {
+  const context = React.useContext(CommandMenuContext);
+  if (!context)
+    throw new Error("useCommandMenu must be used within CommandMenuProvider");
+  return context;
+};
+
+const CommandMenu = DialogPrimitive.Root;
+const CommandMenuTrigger = DialogPrimitive.Trigger;
+const CommandMenuPortal = DialogPrimitive.Portal;
+const CommandMenuClose = DialogPrimitive.Close;
+
+const CommandMenuTitle = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    className={cn(
+      "font-semibold text-foreground text-lg leading-none tracking-tight",
+      className
+    )}
+    ref={ref}
+    {...props}
+  />
+));
+CommandMenuTitle.displayName = "CommandMenuTitle";
+
+const CommandMenuDescription = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    className={cn("text-muted-foreground text-sm", className)}
+    ref={ref}
+    {...props}
+  />
+));
+CommandMenuDescription.displayName = "CommandMenuDescription";
+
+const CommandMenuOverlay = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    className={cn(
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=closed]:animate-out data-[state=open]:animate-in",
+      className
+    )}
+    ref={ref}
+    {...props}
+  />
+));
+CommandMenuOverlay.displayName = "CommandMenuOverlay";
+
+const CommandMenuContent = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    showShortcut?: boolean;
+    scrollType?: "auto" | "always" | "scroll" | "hover";
+    scrollHideDelay?: number;
+  }
+>(
+  (
+    {
+      className,
+      children,
+      showShortcut = true,
+      scrollType = "hover",
+      scrollHideDelay = 600,
+      ...props
+    },
+    ref
+  ) => {
+    const [value, setValue] = React.useState("");
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+
+    React.useEffect(() => {
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter") {
+          e.preventDefault();
+        }
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, []);
+
+    return (
+      <CommandMenuPortal>
+        <CommandMenuOverlay />
+        <DialogPrimitive.Content asChild ref={ref} {...props}>
+          <div
+            className={cn(
+              "fixed top-[30%] left-1/2 z-50 w-auto max-w-none -translate-x-1/2 -translate-y-1/2",
+              "rounded-xl border border-border bg-background",
+              "overflow-hidden",
+              "motion-safe:duration-200 motion-reduce:animate-none",
+              className
+            )}
+          >
+            <CommandMenuProvider
+              scrollHideDelay={scrollHideDelay}
+              scrollType={scrollType}
+              selectedIndex={selectedIndex}
+              setSelectedIndex={setSelectedIndex}
+              setValue={setValue}
+              value={value}
+            >
+              <VisuallyHidden.Root>
+                <CommandMenuTitle>Command Menu</CommandMenuTitle>
+              </VisuallyHidden.Root>
+              {children}
+              <CommandMenuClose className="absolute top-3 right-3 rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+                <X size={14} />
+                <span className="sr-only">Close</span>
+              </CommandMenuClose>
+              {showShortcut && (
+                <div className="absolute top-3 right-12 flex h-6 items-center justify-center gap-1">
+                  <kbd
+                    data-slot="kbd"
+                    className="inline-flex items-center justify-center rounded px-1.5 py-1 font-mono text-[10px] font-medium text-muted-foreground bg-muted h-[22px] min-w-[22px] leading-none"
+                  >
+                    <Command size={10} />
+                  </kbd>
+                  <kbd
+                    data-slot="kbd"
+                    className="inline-flex items-center justify-center rounded px-1.5 py-1 font-mono text-[10px] font-medium text-muted-foreground bg-muted h-[22px] min-w-[22px] leading-none"
+                  >
+                    <span className="text-xs font-medium">K</span>
+                  </kbd>
+                  <span className="text-xs text-muted-foreground">/</span>
+                  <kbd
+                    data-slot="kbd"
+                    className="inline-flex items-center justify-center rounded px-1.5 py-1 font-mono text-[10px] font-medium text-muted-foreground bg-muted h-[22px] min-w-[22px] leading-none"
+                  >
+                    <span className="text-xs font-medium">ESC</span>
+                  </kbd>
+                </div>
+              )}
+            </CommandMenuProvider>
+          </div>
+        </DialogPrimitive.Content>
+      </CommandMenuPortal>
+    );
+  }
+);
+CommandMenuContent.displayName = "CommandMenuContent";
+
+const CommandMenuInput = React.forwardRef<
+  HTMLInputElement,
+  React.InputHTMLAttributes<HTMLInputElement> & { placeholder?: string }
+>(
+  (
+    { className, placeholder = "Type a command or search...", ...props },
+    ref
+  ) => {
+    const { value, setValue } = useCommandMenu();
+    return (
+      <div className="flex items-center gap-2 border-border border-b px-3 py-0">
+        <Search className="size-4 shrink-0 text-muted-foreground" />
+        <input
+          className={cn(
+            "h-12 w-full rounded-none border-0 bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          )}
+          onChange={(e) => setValue(e.target.value)}
+          placeholder={placeholder}
+          ref={ref}
+          value={value}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+CommandMenuInput.displayName = "CommandMenuInput";
+
+const CommandMenuList = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { maxHeight?: string }
+>(({ className, children, maxHeight = "300px", ...props }, ref) => {
+  const {
+    selectedIndex,
+    setSelectedIndex,
+    scrollType = "hover",
+    scrollHideDelay = 600,
+  } = useCommandMenu();
+
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const items = document.querySelectorAll("[data-command-item]");
+      const maxIndex = items.length - 1;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        const newIndex = Math.min(selectedIndex + 1, maxIndex);
+        setSelectedIndex(newIndex);
+        (items[newIndex] as HTMLElement | undefined)?.scrollIntoView({
+          block: "nearest",
+          behavior: "smooth",
+        });
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        const newIndex = Math.max(selectedIndex - 1, 0);
+        setSelectedIndex(newIndex);
+        (items[newIndex] as HTMLElement | undefined)?.scrollIntoView({
+          block: "nearest",
+          behavior: "smooth",
+        });
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [selectedIndex, setSelectedIndex]);
+
+  return (
+    <div className="p-1" ref={ref} {...props}>
+      <ScrollArea
+        className={cn("w-full", className)}
+        scrollHideDelay={scrollHideDelay}
+        style={{ height: maxHeight }}
+        type={scrollType}
+      >
+        <div className="flex flex-col gap-0.5 p-0.5">{children}</div>
+      </ScrollArea>
+    </div>
+  );
+});
+CommandMenuList.displayName = "CommandMenuList";
+
+const CommandMenuGroup = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { heading?: string }
+>(({ className, children, heading, ...props }, ref) => (
+  <div className={cn("", className)} ref={ref} {...props}>
+    {heading && (
+      <div className="px-2 py-1.5 font-medium text-muted-foreground text-xs uppercase tracking-wider">
+        {heading}
+      </div>
+    )}
+    {children}
+  </div>
+));
+CommandMenuGroup.displayName = "CommandMenuGroup";
+
+const CommandMenuItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    onSelect?: () => void;
+    disabled?: boolean;
+    shortcut?: string;
+    icon?: React.ReactNode;
+    index?: number;
+  }
+>(
+  (
+    {
+      className,
+      children,
+      onSelect,
+      disabled = false,
+      shortcut,
+      icon,
+      index = 0,
+      ...props
+    },
+    ref
+  ) => {
+    const { selectedIndex, setSelectedIndex } = useCommandMenu();
+    const isSelected = selectedIndex === index;
+
+    const handleSelect = React.useCallback(() => {
+      if (!disabled && onSelect) onSelect();
+    }, [disabled, onSelect]);
+
+    React.useEffect(() => {
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === "Enter" && isSelected) {
+          e.preventDefault();
+          handleSelect();
+        }
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isSelected, handleSelect]);
+
+    return (
+      <div
+        className={cn(
+          "relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors",
+          "hover:bg-accent hover:text-accent-foreground",
+          isSelected && "bg-accent text-accent-foreground",
+          disabled && "pointer-events-none opacity-50",
+          className
+        )}
+        data-command-item
+        onClick={handleSelect}
+        onMouseEnter={() => setSelectedIndex(index)}
+        ref={ref}
+        {...props}
+      >
+        {icon && (
+          <div className="flex size-4 items-center justify-center">{icon}</div>
+        )}
+        <div className="flex-1">{children}</div>
+        {shortcut && (
+          <div className="ml-auto flex items-center gap-1">
+            {shortcut.split("+").map((key, i) => (
+              <React.Fragment key={`${key}-${i}`}>
+                {i > 0 && (
+                  <span className="text-muted-foreground text-xs">+</span>
+                )}
+                <kbd
+                  data-slot="kbd"
+                  className={cn(
+                    "inline-flex items-center justify-center rounded px-1.5 py-1 font-mono text-[10px] font-medium text-muted-foreground bg-muted h-[22px] min-w-[22px] leading-none"
+                  )}
+                >
+                  {key === "CMD" || key === "⌘" ? (
+                    <Command size={10} />
+                  ) : key === "OPTION" || key === "ALT" ? (
+                    <Option size={14} />
+                  ) : key === "SHIFT" ? (
+                    <ArrowBigUp size={13} />
+                  ) : key === "CTRL" ? (
+                    <span className="text-xs font-medium">CTRL</span>
+                  ) : key === "ESC" || key === "ESCAPE" ? (
+                    <span className="text-xs font-medium">ESC</span>
+                  ) : key === "DELETE" || key === "BACKSPACE" ? (
+                    <Delete size={14} />
+                  ) : key === "ARROWUP" ? (
+                    <ArrowUp size={14} />
+                  ) : key === "ARROWDOWN" ? (
+                    <ArrowDown size={14} />
+                  ) : key === "ARROWLEFT" ? (
+                    <ArrowLeft size={14} />
+                  ) : key === "ARROWRIGHT" ? (
+                    <ArrowRight size={14} />
+                  ) : key === "SPACE" ? (
+                    <Space size={14} />
+                  ) : (
+                    <span className="text-xs font-medium">{key}</span>
+                  )}
+                </kbd>
+              </React.Fragment>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+CommandMenuItem.displayName = "CommandMenuItem";
+
+const CommandMenuSeparator = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    ref={ref}
+    {...props}
+  />
+));
+CommandMenuSeparator.displayName = "CommandMenuSeparator";
+
+const CommandMenuEmpty = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, children = "No results found.", ...props }, ref) => (
+  <div
+    className={cn("py-6 text-center text-muted-foreground text-sm", className)}
+    ref={ref}
+    {...props}
+  >
+    {children}
+  </div>
+));
+CommandMenuEmpty.displayName = "CommandMenuEmpty";
+
+export const useCommandMenuShortcut = (callback: () => void) => {
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        callback();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [callback]);
+};
+
+export {
+  CommandMenu,
+  CommandMenuTrigger,
+  CommandMenuContent,
+  CommandMenuTitle,
+  CommandMenuDescription,
+  CommandMenuInput,
+  CommandMenuList,
+  CommandMenuEmpty,
+  CommandMenuGroup,
+  CommandMenuItem,
+  CommandMenuSeparator,
+  CommandMenuClose,
+  CommandMenuProvider,
+  useCommandMenu,
+};

package/src/components/layout/sidebar-03/app-sidebar.tsx

@@ -39,7 +39,8 @@ import { Badge } from "@/components/ui/badge"
 import { workspaceRoutes } from "@/config/sidebar-routes";
 import { notifications } from "@/config/sidebar-notifications";
 import type { Route } from "@/config/sidebar-routes";
-import { SidebarSearchTrigger } from "@/components/layout/sidebar-03/sidebar-search-trigger"
+import { SidebarSearchTrigger } from "@/components/layout/sidebar-03/nav-search-trigger"
+import { NavSecondary } from "@/components/layout/sidebar-03/nav-secondary"
 import { PluginNavItems } from '@/components/plugin-slots/plugin-nav-items'
 
 export function DashboardSidebar() {
@@ -101,6 +102,7 @@ export function DashboardSidebar() {
         <NavAnyHub />
       </SidebarContent>
       <SidebarFooter className="gap-2 px-2 pb-3">
+        <NavSecondary />
         <SidebarSearchTrigger />
         <UserMenu />
       </SidebarFooter>

package/src/components/layout/sidebar-03/{sidebar-search-trigger.tsx → nav-search-trigger.tsx}

@@ -16,11 +16,16 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useTranslation } from "react-i18next"
-import { Search } from "lucide-react"
+import { Search, Command } from "lucide-react"
 import { useSidebar } from "@/components/ui/sidebar"
 import { cn } from "@/lib/utils"
 import { setCommandPaletteOpen } from "@/lib/commands/command-palette-state"
 
+const isMac =
+  typeof navigator !== "undefined" &&
+  (navigator.platform.toUpperCase().includes("MAC") ||
+    navigator.userAgent.toUpperCase().includes("MAC"))
+
 export function SidebarSearchTrigger() {
   const { t } = useTranslation("common")
   const { state } = useSidebar()
@@ -50,14 +55,23 @@ export function SidebarSearchTrigger() {
       )}
     >
       <Search className="size-4 shrink-0" />
-      <span className="flex-1 truncate text-left">
+      <span className="flex-1 truncate text-left text-xs">
         {t("command.searchPlaceholder")}
       </span>
-      <span className="inline-flex items-center gap-0.5">
-        <kbd className="rounded border border-border bg-muted/60 px-1 py-0.5 text-[10px] font-medium text-muted-foreground">
-          ⌘K
-        </kbd>
-      </span>
+        <span className="inline-flex items-center gap-1 rounded border border-border bg-muted/60 px-1.5 py-0.5">
+          <kbd
+            data-slot="kbd"
+            className="inline-flex items-center justify-center"
+          >
+            {isMac ? <Command size={10} /> : <span className="text-[10px] font-medium text-muted-foreground">Ctrl</span>}
+          </kbd>
+          <kbd
+            data-slot="kbd"
+            className="inline-flex items-center justify-center"
+          >
+            <span className="text-[11px] font-medium text-muted-foreground">K</span>
+          </kbd>
+        </span>
     </button>
   )
 }

package/src/components/layout/sidebar-03/nav-secondary.tsx

@@ -0,0 +1,93 @@
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/components/ui/sidebar"
+import { BookOpen, ScrollText } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { Link } from "@tanstack/react-router"
+import { APP_VERSION_DISPLAY } from "@/lib/app-version"
+
+const items = [
+  {
+    title: "使用文档",
+    Icon: BookOpen,
+    href: "/docs",
+    tooltip: "使用文档",
+    external: true,
+  },
+  {
+    title: "开发者日志",
+    Icon: ScrollText,
+    href: "/changelog",
+    tooltip: "开发者日志",
+    badge: APP_VERSION_DISPLAY,
+  },
+]
+
+export function NavSecondary() {
+  const { state } = useSidebar()
+  const isCollapsed = state === "collapsed"
+
+  return (
+    <SidebarMenu className={cn("space-y-1", isCollapsed && "px-1")}>
+      {!isCollapsed && (
+        <div className="px-2 text-xs font-medium text-muted-foreground/70">
+          {/* 资源 */}
+        </div>
+      )}
+{items.map((item) => (
+        <SidebarMenuItem key={item.title}>
+          <SidebarMenuButton
+            asChild
+            tooltip={item.tooltip}
+            className={cn(
+              "flex items-center rounded-lg px-2",
+              isCollapsed && "justify-center"
+            )}
+          >
+            {item.external ? (
+              <a
+                href={item.href}
+                className={cn(
+                  "flex w-full items-center gap-3 text-muted-foreground hover:text-foreground",
+                  isCollapsed && "justify-center -ml-1"
+                )}
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{ width: "100%", height: "100%" }}
+              >
+                <item.Icon className={cn("text-muted-foreground", !isCollapsed && "size-3.5!")} />
+                {!isCollapsed && (
+                  <span className="text-xs text-muted-foreground">{item.title}</span>
+                )}
+              </a>
+            ) : (
+              <Link
+                to={item.href}
+                className={cn(
+                  "flex w-full items-center justify-between gap-3 text-muted-foreground hover:text-foreground",
+                  isCollapsed && "justify-center -ml-1"
+                )}
+                style={{ width: "100%", height: "100%" }}
+              >
+                <div className="flex items-center gap-3">
+                  <item.Icon className={cn("text-muted-foreground", !isCollapsed && "size-3.5!")} />
+                  {!isCollapsed && (
+                    <span className="text-xs text-muted-foreground">{item.title}</span>
+                  )}
+                </div>
+                {!isCollapsed && item.badge && (
+                  <code className="text-[10px] font-mono text-muted-foreground/60 bg-muted/50 px-1.5 py-0.5 rounded shrink-0">
+                    {item.badge}
+                  </code>
+                )}
+              </Link>
+            )}
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  )
+}

package/src/lib/app-version.ts

@@ -0,0 +1,20 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+export const APP_VERSION = '0.5.0'
+export const APP_VERSION_DISPLAY = `v${APP_VERSION}`
+export const APP_FULL_VERSION = `AllBlue v${APP_VERSION}`

package/src/lib/changelog/sdk-versions-types.ts

@@ -0,0 +1,14 @@
+export interface SdkVersion {
+  name: string
+  version: string
+  lastUpdate: string
+  source: string
+  docsUrl: string | null
+}
+
+export interface SdkGroup {
+  id: 'tanstack' | 'allblue' | 'core'
+  label: string
+  icon: string
+  items: SdkVersion[]
+}