From 37d83c9ac89f566157da50c436eaf362e59daae8 Mon Sep 17 00:00:00 2001
From: hailin <wbwang_hailin@kingdee.com>
Date: Thu, 2 Jul 2026 15:26:10 +0800
Subject: [PATCH] feat: add mobile shadcn admin navigation

---
 frontend/src/app/layout/AppShell.tsx       |   8 +-
 frontend/src/components/app/AppField.tsx   |  18 +-
 frontend/src/components/app/AppSidebar.tsx | 108 +++++++----
 frontend/src/components/app/AppTopbar.tsx  |  17 +-
 frontend/src/components/ui/field.tsx       | 216 +++++++++++++++++++++
 5 files changed, 324 insertions(+), 43 deletions(-)
 create mode 100644 frontend/src/components/ui/field.tsx

diff --git a/frontend/src/app/layout/AppShell.tsx b/frontend/src/app/layout/AppShell.tsx
index b06357e..50967bb 100644
--- a/frontend/src/app/layout/AppShell.tsx
+++ b/frontend/src/app/layout/AppShell.tsx
@@ -1,4 +1,4 @@
-import type * as React from 'react'
+import * as React from 'react'
 
 import { AppSidebar } from '@/components/app/AppSidebar'
 import { AppTopbar } from '@/components/app/AppTopbar'
@@ -8,11 +8,13 @@ type AppShellProps = {
 }
 
 export function AppShell({ children }: AppShellProps) {
+  const [mobileNavOpen, setMobileNavOpen] = React.useState(false)
+
   return (
     <div className="min-h-screen bg-background text-foreground">
-      <AppSidebar />
+      <AppSidebar mobileOpen={mobileNavOpen} onMobileOpenChange={setMobileNavOpen} />
       <div className="min-h-screen lg:pl-72">
-        <AppTopbar />
+        <AppTopbar onMobileMenuClick={() => setMobileNavOpen(true)} />
         {children}
       </div>
     </div>
diff --git a/frontend/src/components/app/AppField.tsx b/frontend/src/components/app/AppField.tsx
index 2a160cc..f1d324f 100644
--- 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>
   )
 }
diff --git a/frontend/src/components/app/AppSidebar.tsx b/frontend/src/components/app/AppSidebar.tsx
index 3304a94..b26fcc5 100644
--- 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>
+    </>
   )
 }
diff --git a/frontend/src/components/app/AppTopbar.tsx b/frontend/src/components/app/AppTopbar.tsx
index 24a4ccb..fdbd390 100644
--- 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>
diff --git a/frontend/src/components/ui/field.tsx b/frontend/src/components/ui/field.tsx
new file mode 100644
index 0000000..62bf4cb
--- /dev/null
+++ b/frontend/src/components/ui/field.tsx
@@ -0,0 +1,216 @@
+import * as React from "react"
+import { useMemo } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+import { cn } from "@/lib/utils"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+        horizontal:
+          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        responsive:
+          "flex-col *:w-full md:flex-row md:items-center md:*:w-auto md:has-[>[data-slot=field-content]]:items-start md:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto md:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn("group/field-content flex flex-1 flex-col gap-0.5 leading-snug", className)}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-left text-sm leading-normal font-normal text-muted-foreground",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn("relative -my-2 h-5 text-sm", className)}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children ? (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      ) : null}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) return children
+    if (!errors?.length) return null
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors.length === 1) return uniqueErrors[0]?.message
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map((error, index) =>
+          error?.message ? <li key={index}>{error.message}</li> : null
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) return null
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+}