@zhin.js/console 1.0.50 → 1.0.52

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @zhin.js/console
 
+## 1.0.52
+
+### Patch Changes
+
+- bb6bfa8: chore: 控制台路由 key、client tsc、页面模块化拆分；client/satori 的 clean 与构建产物约定对齐
+- Updated dependencies [bb6bfa8]
+- Updated dependencies [bb6bfa8]
+- Updated dependencies [bb6bfa8]
+  - @zhin.js/core@1.0.52
+  - zhin.js@1.0.52
+  - @zhin.js/client@1.0.13
+  - @zhin.js/http@1.0.46
+
+## 1.0.51
+
+### Patch Changes
+
+- a451abf: fix: console 白屏
+
 ## 1.0.50
 
 ### Patch Changes

package/README.md

@@ -12,6 +12,28 @@ Zhin 机器人框架的 Web 控制台插件，提供开发环境下的可视化
 - 🛠️ 开发工具集成
 - 📱 WebSocket 实时通信
 
+### ICQQ 登录辅助（不在 Console 提供）
+
+- **登录辅助的 HTTP API 与 Web UI 由 `@zhin.js/adapter-icqq` 注册**，Console 插件不再挂载 `/api/login-assist/*`。
+- 启用 **console + icqq** 后，在控制台侧栏进入 **ICQQ 管理**（扩展入口 `/icqq`），在 **「登录辅助」** Tab 中完成扫码 / 验证码等流程。
+- 未启用 icqq 时，不应存在 `/api/login-assist` 路由（为预期行为，不保留旧路径兼容）。
+
+## 控制台扩展的 TypeScript 基线
+
+适配器或插件若带有 **`client/`**（浏览器端），可在 `client/tsconfig.json` 中：
+
+```json
+{
+  "extends": "@zhin.js/console/browser.tsconfig.json",
+  "compilerOptions": { "outDir": "../dist" },
+  "include": ["./**/*"]
+}
+```
+
+Node 侧 **`src/`** 可参考 **`@zhin.js/console/node.tsconfig.json`**，并在本包 `tsconfig` 中补全 `rootDir`、`outDir`、`include`。
+
+上述文件由本包 `exports` 随包发布。
+
 ## 技术架构
 
 - **构建工具**: Vite 7.x

package/browser.tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Zhin Console — 适配器 / 插件「浏览器端 client/」推荐基线",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
+    "declarationMap": true,
+    "sourceMap": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "isolatedModules": true
+  }
+}

package/client/src/components/PageHeader.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react'
+import { cn } from '@zhin.js/client'
+
+export interface PageHeaderProps {
+  title: string
+  description?: string
+  actions?: ReactNode
+  className?: string
+}
+
+/**
+ * 统一页面标题区（与各业务页配合使用）
+ */
+export function PageHeader({ title, description, actions, className }: PageHeaderProps) {
+  return (
+    <div className={cn('flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between sm:gap-4', className)}>
+      <div className="min-w-0 space-y-1">
+        <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
+        {description ? (
+          <p className="text-sm text-muted-foreground max-w-2xl">{description}</p>
+        ) : null}
+      </div>
+      {actions ? <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div> : null}
+    </div>
+  )
+}

package/client/src/components/ui/accordion.tsx

@@ -8,9 +8,10 @@ const Accordion = AccordionPrimitive.Root
 const AccordionItem = React.forwardRef<
   React.ComponentRef<typeof AccordionPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
+>(({ className, value, ...props }, ref) => (
   <AccordionPrimitive.Item
     ref={ref}
+    value={value}
     className={cn("border-b", className)}
     {...props}
   />

package/client/src/components/ui/badge.tsx

@@ -21,9 +21,7 @@ const badgeVariants = cva(
   }
 )
 
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+export type BadgeProps = React.ComponentPropsWithoutRef<'div'> & VariantProps<typeof badgeVariants>
 
 function Badge({ className, variant, ...props }: BadgeProps) {
   return <div className={cn(badgeVariants({ variant }), className)} {...props} />

package/client/src/components/ui/scroll-area.tsx

@@ -23,7 +23,9 @@ ScrollArea.displayName = "ScrollArea"
 const ScrollBar = React.forwardRef<
   React.ComponentRef<typeof ScrollAreaPrimitive.Scrollbar>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
+>(({ className, orientation: orientationProp, ...props }, ref) => {
+  const orientation = (orientationProp ?? "vertical") as "vertical" | "horizontal"
+  return (
   <ScrollAreaPrimitive.Scrollbar
     ref={ref}
     orientation={orientation}
@@ -37,7 +39,8 @@ const ScrollBar = React.forwardRef<
   >
     <ScrollAreaPrimitive.Thumb className="relative flex-1 rounded-full bg-border" />
   </ScrollAreaPrimitive.Scrollbar>
-))
+  )
+})
 ScrollBar.displayName = "ScrollBar"
 
 export { ScrollArea, ScrollBar }

package/client/src/components/ui/select.tsx

@@ -58,7 +58,9 @@ SelectScrollDownButton.displayName = "SelectScrollDownButton"
 const SelectContent = React.forwardRef<
   React.ComponentRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
+>(({ className, children, position: positionProp, ...props }, ref) => {
+  const position = (positionProp ?? "popper") as "popper" | "item-aligned"
+  return (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       ref={ref}
@@ -84,15 +86,17 @@ const SelectContent = React.forwardRef<
       <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-))
+  )
+})
 SelectContent.displayName = "SelectContent"
 
 const SelectItem = React.forwardRef<
   React.ComponentRef<typeof SelectPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
+>(({ className, children, value, ...props }, ref) => (
   <SelectPrimitive.Item
     ref={ref}
+    value={value}
     className={cn(
       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className

package/client/src/components/ui/separator.tsx

@@ -5,7 +5,9 @@ import { cn } from "@zhin.js/client"
 const Separator = React.forwardRef<
   React.ComponentRef<typeof SeparatorPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+>(({ className, orientation: orientationProp, decorative = true, ...props }, ref) => {
+  const orientation = (orientationProp ?? "horizontal") as "vertical" | "horizontal"
+  return (
   <SeparatorPrimitive.Root
     ref={ref}
     decorative={decorative}
@@ -17,7 +19,8 @@ const Separator = React.forwardRef<
     )}
     {...props}
   />
-))
+  )
+})
 Separator.displayName = "Separator"
 
 export { Separator }

package/client/src/components/ui/tabs.tsx

@@ -22,9 +22,10 @@ TabsList.displayName = "TabsList"
 const TabsTrigger = React.forwardRef<
   React.ComponentRef<typeof TabsPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
+>(({ className, value, ...props }, ref) => (
   <TabsPrimitive.Trigger
     ref={ref}
+    value={value}
     className={cn(
       "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
       className
@@ -37,9 +38,10 @@ TabsTrigger.displayName = "TabsTrigger"
 const TabsContent = React.forwardRef<
   React.ComponentRef<typeof TabsPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
+>(({ className, value, ...props }, ref) => (
   <TabsPrimitive.Content
     ref={ref}
+    value={value}
     className={cn(
       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className

package/client/src/layouts/dashboard.tsx

@@ -1,139 +1,241 @@
-import { Outlet, Link, useSelector, useDispatch, toggleSidebar, setActiveMenu } from "@zhin.js/client"
-import { useMemo } from "react"
+import {
+  Outlet,
+  Link,
+  useSelector,
+  useDispatch,
+  toggleSidebar,
+  setActiveMenu,
+  type RouteMenuItem,
+} from "@zhin.js/client"
+import { useMemo, useState, useCallback, type KeyboardEvent } from "react"
+import { useLocation, useNavigate, matchPath } from "react-router"
 import { Menu, Search, LogOut } from 'lucide-react'
 import { cn } from "@zhin.js/client"
 import { ThemeToggle } from "../components/ThemeToggle"
 import { Button } from "../components/ui/button"
 import { Input } from "../components/ui/input"
 import { ScrollArea } from "../components/ui/scroll-area"
+import { Separator } from "../components/ui/separator"
 import { clearToken } from "../utils/auth"
 
+const GROUP_ORDER = ["系统", "扩展", "配置与数据", "其他"] as const
+
+function collectMenuRoutes(children: RouteMenuItem[]): RouteMenuItem[] {
+  return children.filter((r) => !r.meta?.hideInMenu && r.key !== "dashboardLayout")
+}
+
+function useContentFullWidth(routes: RouteMenuItem[], pathname: string): boolean {
+  return useMemo(() => {
+    const dash = routes.find((r) => r.key === "dashboardLayout")
+    const children = dash?.children ?? []
+    for (const c of children) {
+      if (!(c.meta as { fullWidth?: boolean } | undefined)?.fullWidth || !c.path) continue
+      const m = matchPath({ path: c.path, end: true }, pathname)
+      if (m) return true
+    }
+    return false
+  }, [routes, pathname])
+}
+
 export default function DashboardLayout() {
-    const dispatch = useDispatch()
-    const sidebarOpen = useSelector(state => state.ui.sidebarOpen)
-    const activeMenu = useSelector(state => state.ui.activeMenu)
-    const routes = useSelector(state => state.route.routes)
-
-    const menuItems = useMemo(() => {
-        const dashboardRoute = routes.find(route => route.key === 'dashboard-layout')
-        if (!dashboardRoute || !dashboardRoute.children) {
-            return []
-        }
-        return dashboardRoute.children
-            .filter(route => !route.meta?.hideInMenu && route.key !== 'dashboard-layout')
-            .map((route, index) => ({
-                key: route.key || `menu-item-${index}`,
-                title: route.title,
-                index: route.index,
-                icon: route.icon,
-                href: route.path
-            }))
-    }, [routes])
-
-    return (
-        <div className="flex h-screen bg-background">
-            {/* Sidebar */}
-            <div className={cn(
-                "flex flex-col border-r bg-sidebar transition-all duration-300",
-                sidebarOpen ? "w-64" : "w-16"
-            )}>
-                {/* Logo */}
-                <div className="p-4 border-b">
-                    <div className={cn(
-                        "flex items-center transition-all duration-300",
-                        sidebarOpen ? "gap-3" : "justify-center"
-                    )}>
-                        <div className="flex items-center justify-center w-9 h-9 min-w-9 rounded-lg bg-foreground text-background font-bold text-lg">
-                            Z
-                        </div>
-                        {sidebarOpen && (
-                            <div className="flex flex-col">
-                                <span className="text-base font-semibold">Zhin.js</span>
-                                <span className="text-xs text-muted-foreground">管理控制台</span>
-                            </div>
-                        )}
+  const dispatch = useDispatch()
+  const location = useLocation()
+  const navigate = useNavigate()
+  const sidebarOpen = useSelector((state) => state.ui.sidebarOpen)
+  const activeMenu = useSelector((state) => state.ui.activeMenu)
+  const routes = useSelector((state) => state.route.routes)
+  const [searchQ, setSearchQ] = useState("")
+
+  const menuRoutes = useMemo(() => {
+    const dashboardRoute = routes.find((route) => route.key === "dashboardLayout")
+    if (!dashboardRoute?.children) return []
+    return collectMenuRoutes(dashboardRoute.children).sort(
+      (a, b) => (a.meta?.order ?? 999) - (b.meta?.order ?? 999),
+    )
+  }, [routes])
+
+  const menuByGroup = useMemo(() => {
+    const map = new Map<string, RouteMenuItem[]>()
+    for (const r of menuRoutes) {
+      const g = r.meta?.group ?? "其他"
+      if (!map.has(g)) map.set(g, [])
+      map.get(g)!.push(r)
+    }
+    for (const [, items] of map) {
+      items.sort((a, b) => (a.meta?.order ?? 999) - (b.meta?.order ?? 999))
+    }
+    return map
+  }, [menuRoutes])
+
+  const searchTargets = useMemo(
+    () => menuRoutes.map((r) => ({ title: r.title, path: r.path, key: r.key })),
+    [menuRoutes],
+  )
+
+  const searchHits = useMemo(() => {
+    const q = searchQ.trim().toLowerCase()
+    if (!q) return searchTargets
+    return searchTargets.filter(
+      (t) => t.title.toLowerCase().includes(q) || t.path.toLowerCase().includes(q),
+    )
+  }, [searchQ, searchTargets])
+
+  const onSearchKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key !== "Enter") return
+      const first = searchHits[0]
+      if (first?.path) {
+        navigate(first.path)
+        dispatch(setActiveMenu(first.key))
+        setSearchQ("")
+      }
+    },
+    [searchHits, navigate, dispatch],
+  )
+
+  const contentFullWidth = useContentFullWidth(routes, location.pathname)
+
+  const orderedGroups = useMemo(() => {
+    const seen = new Set<string>()
+    const out: string[] = []
+    for (const g of GROUP_ORDER) {
+      if (menuByGroup.has(g) && menuByGroup.get(g)!.length) {
+        out.push(g)
+        seen.add(g)
+      }
+    }
+    for (const g of menuByGroup.keys()) {
+      if (!seen.has(g) && menuByGroup.get(g)!.length) out.push(g)
+    }
+    return out
+  }, [menuByGroup])
+
+  return (
+    <div className="flex h-screen bg-background">
+      <div
+        className={cn(
+          "flex flex-col border-r bg-sidebar transition-all duration-300",
+          sidebarOpen ? "w-64" : "w-16",
+        )}
+      >
+        <div className="p-4 border-b">
+          <div
+            className={cn(
+              "flex items-center transition-all duration-300",
+              sidebarOpen ? "gap-3" : "justify-center",
+            )}
+          >
+            <div className="flex items-center justify-center w-9 h-9 min-w-9 rounded-lg bg-foreground text-background font-bold text-lg">
+              Z
+            </div>
+            {sidebarOpen && (
+              <div className="flex flex-col min-w-0">
+                <span className="text-base font-semibold truncate">Zhin.js</span>
+                <span className="text-xs text-muted-foreground">管理控制台</span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <ScrollArea className="flex-1">
+          <div className="p-2 space-y-3">
+            {orderedGroups.map((groupName) => {
+              const items = menuByGroup.get(groupName) ?? []
+              if (!items.length) return null
+              return (
+                <div key={groupName} className="space-y-1">
+                  {sidebarOpen && (
+                    <div className="px-2 pt-1 pb-0.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+                      {groupName}
                     </div>
+                  )}
+                  {items.map((route, index) => {
+                    const itemKey = route.key || `menu-item-${groupName}-${index}`
+                    const isActive = activeMenu === itemKey
+                    return (
+                      <Link
+                        key={itemKey}
+                        to={route.path}
+                        onClick={() => dispatch(setActiveMenu(itemKey))}
+                        className={cn(
+                          "menu-item",
+                          isActive && "active",
+                          !sidebarOpen && "justify-center px-2",
+                        )}
+                      >
+                        <span className="shrink-0">{route.icon}</span>
+                        {sidebarOpen && <span className="truncate">{route.title}</span>}
+                      </Link>
+                    )
+                  })}
                 </div>
+              )
+            })}
+          </div>
+        </ScrollArea>
+      </div>
 
-                {/* Menu */}
-                <ScrollArea className="flex-1">
-                    <div className="p-2 space-y-1">
-                        {menuItems.map((item) => {
-                            const isActive = activeMenu === item.key
-                            return (
-                                <Link
-                                    key={item.key}
-                                    to={item.href}
-                                    onClick={() => dispatch(setActiveMenu(item.key))}
-                                    className={cn(
-                                        "menu-item",
-                                        isActive && "active",
-                                        !sidebarOpen && "justify-center px-2"
-                                    )}
-                                >
-                                    <span className="shrink-0">{item.icon}</span>
-                                    {sidebarOpen && <span className="truncate">{item.title}</span>}
-                                </Link>
-                            )
-                        })}
-                    </div>
-                </ScrollArea>
+      <div className="flex flex-col flex-1 overflow-hidden min-w-0">
+        <header className="flex items-center justify-between h-14 px-4 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 shrink-0">
+          <div className="flex items-center gap-3 min-w-0">
+            <Button variant="ghost" size="icon" onClick={() => dispatch(toggleSidebar())}>
+              <Menu className="h-5 w-5" />
+            </Button>
+            <div className="flex flex-col min-w-0">
+              <h2 className="text-sm font-semibold truncate">控制台</h2>
+              <span className="text-xs text-muted-foreground truncate">跳转菜单 · Enter 打开首条</span>
             </div>
+          </div>
 
-            {/* Main content area */}
-            <div className="flex flex-col flex-1 overflow-hidden">
-                {/* Top bar */}
-                <header className="flex items-center justify-between h-14 px-4 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-                    {/* Left */}
-                    <div className="flex items-center gap-3">
-                        <Button
-                            variant="ghost"
-                            size="icon"
-                            onClick={() => dispatch(toggleSidebar())}
-                        >
-                            <Menu className="h-5 w-5" />
-                        </Button>
-                        <div className="flex flex-col">
-                            <h2 className="text-sm font-semibold">控制台</h2>
-                            <span className="text-xs text-muted-foreground">欢迎回来</span>
-                        </div>
-                    </div>
+          <div className="hidden md:flex flex-1 max-w-md mx-4">
+            <div className="relative w-full">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
+              <Input
+                value={searchQ}
+                onChange={(e) => setSearchQ(e.target.value)}
+                onKeyDown={onSearchKeyDown}
+                placeholder="按名称或路径搜索菜单…"
+                className="pl-9 bg-muted/50"
+                list="console-nav-search"
+                autoComplete="off"
+              />
+              <datalist id="console-nav-search">
+                {searchTargets.map((t) => (
+                  <option key={t.path} value={`${t.title} ${t.path}`} />
+                ))}
+              </datalist>
+            </div>
+          </div>
 
-                    {/* Center search */}
-                    <div className="hidden md:flex flex-1 max-w-md mx-6">
-                        <div className="relative w-full">
-                            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                            <Input
-                                placeholder="搜索功能、插件、设置..."
-                                className="pl-9 bg-muted/50"
-                            />
-                        </div>
-                    </div>
+          <div className="flex items-center gap-1 shrink-0">
+            <ThemeToggle />
+            <Button
+              variant="ghost"
+              size="icon"
+              title="退出登录"
+              onClick={() => {
+                clearToken()
+                window.dispatchEvent(new CustomEvent("zhin:auth-required"))
+              }}
+            >
+              <LogOut className="h-4 w-4" />
+            </Button>
+          </div>
+        </header>
 
-                    {/* Right actions */}
-                    <div className="flex items-center gap-1">
-                        <ThemeToggle />
-                        <Button
-                            variant="ghost"
-                            size="icon"
-                            title="退出登录"
-                            onClick={() => {
-                                clearToken()
-                                window.dispatchEvent(new CustomEvent('zhin:auth-required'))
-                            }}
-                        >
-                            <LogOut className="h-4 w-4" />
-                        </Button>
-                    </div>
-                </header>
+        <Separator className="md:hidden" />
 
-                {/* Page content */}
-                <main className="flex-1 overflow-auto">
-                    <div className="max-w-7xl mx-auto p-6">
-                        <Outlet />
-                    </div>
-                </main>
-            </div>
-        </div>
-    )
+        <main className="flex-1 overflow-auto min-h-0">
+          <div
+            className={cn(
+              "mx-auto p-6",
+              contentFullWidth ? "max-w-none w-full" : "max-w-7xl",
+            )}
+          >
+            <Outlet />
+          </div>
+        </main>
+      </div>
+    </div>
+  )
 }