feat: 新增命令菜单

besscroft · Sep 27, 2024 · efb7ade · efb7ade
1 parent 972f3fb
commit efb7ade
Show file tree

Hide file tree

Showing 13 changed files with 804 additions and 6 deletions.
diff --git a/app/admin/layout.tsx b/app/admin/layout.tsx
@@ -2,6 +2,7 @@ import DashHeader from '~/components/layout/DashHeader'
 import { BaseSide } from '~/components/layout/BaseSide'
 
 import { AntdRegistry } from '@ant-design/nextjs-registry'
+import Command from '~/components/admin/Command'
 
 export default function AdminLayout({
   children,
@@ -17,6 +18,7 @@ export default function AdminLayout({
             <BaseSide/>
           </aside>
           <main className="flex w-full h-full flex-1 flex-col p-2">
+            <Command />
             <AntdRegistry>{children}</AntdRegistry>
           </main>
         </div>

diff --git a/components/MasonryItem.tsx b/components/MasonryItem.tsx
@@ -1,9 +1,9 @@
 'use client'
 
 import {
-  Dialog,
+  CustomDialog,
   DialogContent,
-} from '~/components/ui/Dialog'
+} from '~/components/ui/CustomDialog'
 import { useButtonStore } from '~/app/providers/button-store-Providers'
 import { CopyrightType, DataProps, ImageType } from '~/types'
 import { Image, Tabs, Tab, Card, CardHeader, CardBody, CardFooter, Button, Chip, Link, Avatar, Tooltip } from '@nextui-org/react'
@@ -72,7 +72,7 @@ export default function MasonryItem() {
   }
 
   return (
-    <Dialog
+    <CustomDialog
       defaultOpen={false}
       open={MasonryView}
       onOpenChange={(open: boolean) => {
@@ -365,6 +365,6 @@ export default function MasonryItem() {
           </div>
         </div>
       </DialogContent>
-    </Dialog>
+    </CustomDialog>
   )
 }
diff --git a/components/admin/Command.tsx b/components/admin/Command.tsx
@@ -0,0 +1,106 @@
+'use client'
+
+import * as React from 'react'
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '~/components/ui/command'
+import { useButtonStore } from '~/app/providers/button-store-Providers'
+import { Archive, Milestone, Image, Server, ImageUp, MonitorDot, Copyright, Info, SquareAsterisk, ShieldCheck } from 'lucide-react'
+import { useRouter } from 'next-nprogress-bar'
+
+export default function Command() {
+  const router = useRouter()
+  const { searchOpen, setSearchOpen } = useButtonStore(
+    (state) => state,
+  )
+
+  return (
+    <CommandDialog open={searchOpen} onOpenChange={setSearchOpen}>
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>没有任何结果.</CommandEmpty>
+        <CommandGroup heading="主菜单">
+          <CommandItem className="cursor-pointer" onSelect={() => {
+            router.push('/admin')
+            setSearchOpen(false)
+          }}>
+            <MonitorDot className="mr-2 h-4 w-4" />
+            <span>控制台</span>
+          </CommandItem>
+          <CommandItem className="cursor-pointer" onSelect={() => {
+            router.push('/admin/upload')
+            setSearchOpen(false)
+          }}>
+            <ImageUp className="mr-2 h-4 w-4" />
+            <span>上传</span>
+          </CommandItem>
+          <CommandItem className="cursor-pointer" onSelect={() => {
+            router.push('/admin/list')
+            setSearchOpen(false)
+          }}>
+            <Image className="mr-2 h-4 w-4" />
+            <span>图片维护</span>
+          </CommandItem>
+          <CommandItem className="cursor-pointer" onSelect={() => {
+            router.push('/admin/tag')
+            setSearchOpen(false)
+          }}>
+            <Milestone className="mr-2 h-4 w-4" />
+            <span>相册管理</span>
+          </CommandItem>
+          <CommandItem className="cursor-pointer" onSelect={() => {
+            router.push('/admin/copyright')
+            setSearchOpen(false)
+          }}>
+            <Copyright className="mr-2 h-4 w-4" />
+            <span>版权管理</span>
+          </CommandItem>
+          <CommandItem className="cursor-pointer" onSelect={() => {
+            router.push('/admin/about')
+            setSearchOpen(false)
+          }}>
+            <Info className="mr-2 h-4 w-4" />
+            <span>关于</span>
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="二级菜单">
+          <CommandItem className="cursor-pointer" onSelect={() => {
+            router.push('/admin/settings/preferences')
+            setSearchOpen(false)
+          }}>
+            <Archive className="mr-2 h-4 w-4" />
+            <span>首选项</span>
+          </CommandItem>
+          <CommandItem className="cursor-pointer" onSelect={() => {
+            router.push('/admin/settings/password')
+            setSearchOpen(false)
+          }}>
+            <SquareAsterisk className="mr-2 h-4 w-4" />
+            <span>密码修改</span>
+          </CommandItem>
+          <CommandItem className="cursor-pointer" onSelect={() => {
+            router.push('/admin/settings/storages')
+            setSearchOpen(false)
+          }}>
+            <Server className="mr-2 h-4 w-4" />
+            <span>存储</span>
+          </CommandItem>
+          <CommandItem className="cursor-pointer" onSelect={() => {
+            router.push('/admin/settings/authenticator')
+            setSearchOpen(false)
+          }}>
+            <ShieldCheck className="mr-2 h-4 w-4" />
+            <span>双因素验证</span>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </CommandDialog>
+  )
+}
diff --git a/components/admin/SearchBorder.tsx b/components/admin/SearchBorder.tsx
@@ -0,0 +1,26 @@
+'use client'
+
+import { Button } from '~/components/ui/button'
+import { cn } from '~/utils'
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons'
+import { useButtonStore } from '~/app/providers/button-store-Providers'
+
+export default function SearchBorder() {
+  const { setSearchOpen } = useButtonStore(
+    (state) => state,
+  )
+
+  return (
+    <Button
+      variant={"outline"}
+      className={cn(
+        "w-[240px] justify-start text-left font-normal",
+        "text-muted-foreground"
+      )}
+      onClick={() => setSearchOpen(true)}
+    >
+      <MagnifyingGlassIcon className="mr-2 h-4 w-4" />
+      <span>搜索</span>
+    </Button>
+  )
+}
diff --git a/components/admin/SearchButton.tsx b/components/admin/SearchButton.tsx
@@ -0,0 +1,20 @@
+'use client'
+
+import { Search } from 'lucide-react'
+import { useButtonStore } from '~/app/providers/button-store-Providers'
+import { usePathname } from 'next/navigation'
+
+export default function SearchButton() {
+  const pathname = usePathname()
+  const { setSearchOpen } = useButtonStore(
+    (state) => state,
+  )
+
+  return (
+    <>
+      {
+        pathname.startsWith('/admin') && <Search onClick={() => setSearchOpen(true)} size={20} />
+      }
+    </>
+  )
+}
diff --git a/components/layout/DashHeader.tsx b/components/layout/DashHeader.tsx
@@ -1,6 +1,7 @@
 import { Navbar, NavbarBrand, NavbarContent, NavbarItem } from '@nextui-org/react'
 import Logo from '~/components/layout/Logo'
 import DynamicNavbar from '~/components/layout/DynamicNavbar'
+import SearchBorder from '~/components/admin/SearchBorder'
 
 export default function DashHeader() {
   return (
@@ -9,6 +10,7 @@ export default function DashHeader() {
         <Logo />
       </NavbarBrand>
       <NavbarContent className="hidden sm:flex gap-4 select-none" justify="center">
+        <SearchBorder />
       </NavbarContent>
       <NavbarContent justify="end">
         <NavbarItem className="flex h-full items-center space-x-2">

diff --git a/components/layout/DynamicNavbar.tsx b/components/layout/DynamicNavbar.tsx
@@ -3,6 +3,7 @@ import { DropMenu } from '~/components/layout/DropMenu'
 import DynamicDropMenu from '~/components/layout/DynamicDropMenu'
 import { fetchTagsShow } from '~/server/lib/query'
 import { DataProps } from '~/types'
+import SearchButton from '~/components/admin/SearchButton'
 
 export default async function DynamicNavbar() {
   const getData = async () => {
@@ -18,6 +19,9 @@ export default async function DynamicNavbar() {
 
   return (
     <>
+      <div className="flex sm:hidden">
+        <SearchButton />
+      </div>
       <div className="flex mx-2 sm:hidden">
         <DynamicDropMenu {...props} />
       </div>

diff --git a/components/ui/Dialog.tsx → components/ui/CustomDialog.tsx b/components/ui/Dialog.tsx → components/ui/CustomDialog.tsx
@@ -6,7 +6,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog'
 
 import { cn } from '~/utils'
 
-const Dialog = DialogPrimitive.Root
+const CustomDialog = DialogPrimitive.Root
 
 const DialogTrigger = DialogPrimitive.Trigger
 
@@ -109,7 +109,7 @@ const DialogDescription = React.forwardRef<
 DialogDescription.displayName = DialogPrimitive.Description.displayName
 
 export {
-  Dialog,
+  CustomDialog,
   DialogPortal,
   DialogOverlay,
   DialogClose,