feat: add mobile shadcn admin navigation

2026-07-02 15:26:10 +08:00
parent 8749faae43
commit 37d83c9ac8
5 changed files with 324 additions and 43 deletions
--- a/frontend/src/components/app/AppField.tsx
+++ b/frontend/src/components/app/AppField.tsx
@@ -1,15 +1,25 @@
 import type * as React from 'react'

+import { Field, FieldDescription, FieldLabel } from '@/components/ui/field'
+
 type AppFieldProps = {
  label: string
+  htmlFor?: string
+  description?: string
+  invalid?: boolean
+  required?: boolean
  children: React.ReactNode
 }

-export function AppField({ label, children }: AppFieldProps) {
+export function AppField({ label, htmlFor, description, invalid, required, children }: AppFieldProps) {
  return (
-    <label className="grid gap-1.5">
-      <span className="text-xs font-medium text-muted-foreground">{label}</span>
+    <Field data-invalid={invalid ? true : undefined}>
+      <FieldLabel htmlFor={htmlFor}>
+        {label}
+        {required ? <span className="text-destructive">*</span> : null}
+      </FieldLabel>
      {children}
-    </label>
+      {description ? <FieldDescription>{description}</FieldDescription> : null}
+    </Field>
  )
 }
--- a/frontend/src/components/app/AppSidebar.tsx
+++ b/frontend/src/components/app/AppSidebar.tsx
@@ -19,6 +19,7 @@ import {
 import { useAuth } from '@/features/auth/AuthProvider'
 import type { AuthMenu } from '@/features/auth/types'
 import { cn } from '@/lib/utils'
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'

 const iconMap = {
  audit: ScrollText,
@@ -56,44 +57,83 @@ function visibleChildren(menu: AuthMenu) {
  return menu.children.filter((item) => item.is_visible && item.is_enabled)
 }

-export function AppSidebar() {
+type SidebarNavContentProps = {
+  groups: AuthMenu[]
+  currentHash: string
+  onNavigate?: () => void
+}
+
+function SidebarBrand() {
+  return (
+    <div className="border-b border-border px-5 py-4">
+      <p className="text-sm font-semibold text-foreground">AI 工单平台</p>
+      <p className="mt-1 text-xs text-muted-foreground">企业技术支持工作台</p>
+    </div>
+  )
+}
+
+function SidebarNavContent({ groups, currentHash, onNavigate }: SidebarNavContentProps) {
+  return (
+    <nav className="flex flex-col gap-5 p-4">
+      {groups.map((group) => (
+        <div key={group.code} className="grid gap-1.5">
+          <p className="px-2 text-xs font-medium text-muted-foreground">{group.title}</p>
+          <div className="grid gap-1">
+            {visibleChildren(group).map((item) => {
+              const Icon = getIcon(item.icon)
+              const active = currentHash === item.path
+              return (
+                <a
+                  className={cn(
+                    'flex h-9 items-center gap-2 rounded-md px-2.5 text-sm text-muted-foreground transition-colors',
+                    'hover:bg-muted hover:text-foreground',
+                    active && 'bg-muted text-foreground'
+                  )}
+                  href={item.path}
+                  key={item.code}
+                  onClick={onNavigate}
+                >
+                  <Icon className="size-4" />
+                  <span>{item.title}</span>
+                </a>
+              )
+            })}
+          </div>
+        </div>
+      ))}
+    </nav>
+  )
+}
+
+type AppSidebarProps = {
+  mobileOpen?: boolean
+  onMobileOpenChange?: (open: boolean) => void
+}
+
+export function AppSidebar({ mobileOpen = false, onMobileOpenChange }: AppSidebarProps) {
  const { user } = useAuth()
  const currentHash = useCurrentHash()
  const groups = (user?.menus ?? []).filter((menu) => menu.is_visible && menu.is_enabled)

  return (
-    <aside className="fixed inset-y-0 left-0 z-30 hidden w-72 border-r border-border bg-surface lg:block">
-      <div className="border-b border-border px-5 py-4">
-        <p className="text-sm font-semibold text-foreground">AI 工单平台</p>
-        <p className="mt-1 text-xs text-muted-foreground">企业技术支持工作台</p>
-      </div>
-      <nav className="flex flex-col gap-5 p-4">
-        {groups.map((group) => (
-          <div key={group.code} className="grid gap-1.5">
-            <p className="px-2 text-xs font-medium text-muted-foreground">{group.title}</p>
-            <div className="grid gap-1">
-              {visibleChildren(group).map((item) => {
-                const Icon = getIcon(item.icon)
-                const active = currentHash === item.path
-                return (
-                  <a
-                    className={cn(
-                      'flex h-9 items-center gap-2 rounded-md px-2.5 text-sm text-muted-foreground transition-colors',
-                      'hover:bg-muted hover:text-foreground',
-                      active && 'bg-muted text-foreground'
-                    )}
-                    href={item.path}
-                    key={item.code}
-                  >
-                    <Icon className="size-4" />
-                    <span>{item.title}</span>
-                  </a>
-                )
-              })}
-            </div>
-          </div>
-        ))}
-      </nav>
-    </aside>
+    <>
+      <aside className="fixed inset-y-0 left-0 z-30 hidden w-72 border-r border-border bg-surface lg:block">
+        <SidebarBrand />
+        <SidebarNavContent groups={groups} currentHash={currentHash} />
+      </aside>
+      <Sheet open={mobileOpen} onOpenChange={onMobileOpenChange}>
+        <SheetContent side="left" className="w-80 gap-0 p-0 lg:hidden">
+          <SheetHeader className="sr-only">
+            <SheetTitle>移动端导航</SheetTitle>
+          </SheetHeader>
+          <SidebarBrand />
+          <SidebarNavContent
+            groups={groups}
+            currentHash={currentHash}
+            onNavigate={() => onMobileOpenChange?.(false)}
+          />
+        </SheetContent>
+      </Sheet>
+    </>
  )
 }
--- a/frontend/src/components/app/AppTopbar.tsx
+++ b/frontend/src/components/app/AppTopbar.tsx
@@ -1,16 +1,29 @@
-import { Bell, ChevronRight, LogOut, UserRound } from 'lucide-react'
+import { Bell, ChevronRight, LogOut, Menu, UserRound } from 'lucide-react'

 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Separator } from '@/components/ui/separator'
 import { useAuth } from '@/features/auth/AuthProvider'

-export function AppTopbar() {
+type AppTopbarProps = {
+  onMobileMenuClick?: () => void
+}
+
+export function AppTopbar({ onMobileMenuClick }: AppTopbarProps) {
  const { logout, user } = useAuth()

  return (
    <header className="sticky top-0 z-20 flex h-14 items-center justify-between border-b border-border bg-surface/95 px-6 backdrop-blur">
      <div className="flex min-w-0 items-center gap-2 text-sm">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="-ml-2 lg:hidden"
+          aria-label="打开导航"
+          onClick={onMobileMenuClick}
+        >
+          <Menu data-icon="inline-start" />
+        </Button>
        <span className="font-medium text-foreground">AI 工单平台</span>
        <ChevronRight className="size-4 text-muted-foreground" />
        <span className="truncate text-muted-foreground">当前工作区</span>