Merge pull request #19 from besscroft/dev

v0.6.3
besscroft · May 6, 2024 · cf9425d · cf9425d
2 parents 5c99eac + c87877f
commit cf9425d
Show file tree

Hide file tree

Showing 11 changed files with 291 additions and 59 deletions.
diff --git a/components/Masonry.tsx b/components/Masonry.tsx
@@ -31,7 +31,6 @@ export default function Masonry(props : Readonly<ImageHandleProps>) {
     <div className="w-full sm:w-4/5 mx-auto p-2">
       <PhotoAlbum
         columns={(containerWidth) => {
-          if (containerWidth < 640) return 1;
           if (containerWidth < 768) return 2;
           if (containerWidth < 1024) return 3;
           return 4;

diff --git a/components/layout/DynamicDropMenu.tsx b/components/layout/DynamicDropMenu.tsx
@@ -1,42 +1,39 @@
 'use client'
 
-import { Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from '@nextui-org/react'
 import { useRouter } from 'next-nprogress-bar'
 import { usePathname } from 'next/navigation'
 import { Aperture } from 'lucide-react'
-import { HandleProps, TagType } from '~/types'
-import { useSWRHydrated } from '~/hooks/useSWRHydrated'
+import { DataProps, TagType } from '~/types'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '~/components/ui/DropdownMenu'
 
-export default function DynamicDropMenu(props: Readonly<HandleProps>) {
+export default function DynamicDropMenu(props: Readonly<DataProps>) {
   const router = useRouter()
   const pathname = usePathname()
-  const { data } = useSWRHydrated(props)
 
   return (
-    <Dropdown shadow="sm" backdrop="blur">
-      <DropdownTrigger>
-        <Aperture size={20} />
-      </DropdownTrigger>
-      <DropdownMenu
-        aria-label="移动端动态路由下拉菜单"
-      >
-        <DropdownItem
+    <DropdownMenu>
+      <DropdownMenuTrigger><Aperture size={20} /></DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem
           key="/"
           onClick={() => router.push('/')}
-          className={pathname === '/' ? 'text-blue-600' : ''}
-        >
-          首页
-        </DropdownItem>
-        {data && Array.isArray(data) && data?.map((tag: TagType, index: any, array: TagType[]) => (
-          <DropdownItem
+          className={pathname === '/' ? 'bg-gray-100' : ''}
+        >首页</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        {Array.isArray(props.data) && props.data?.map((tag: TagType, index: any, array: TagType[]) => (
+          <DropdownMenuItem
             key={tag.id}
             onClick={() => router.push(tag.tag_value)}
-            className={pathname === tag.tag_value ? 'text-blue-600' : ''}
-          >
-            {tag.name}
-          </DropdownItem>
+            className={pathname === tag.tag_value ? 'bg-gray-100' : ''}
+          >{tag.name}</DropdownMenuItem>
         ))}
-      </DropdownMenu>
-    </Dropdown>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
diff --git a/components/layout/DynamicNavbar.tsx b/components/layout/DynamicNavbar.tsx
@@ -2,17 +2,18 @@ import VaulDrawer from '~/components/layout/VaulDrawer'
 import { DropMenu } from '~/components/layout/DropMenu'
 import DynamicDropMenu from '~/components/layout/DynamicDropMenu'
 import { fetchTagsShow } from '~/server/lib/query'
-import { HandleProps } from '~/types'
+import { DataProps } from '~/types'
 
 export default async function DynamicNavbar() {
   const getData = async () => {
     'use server'
     return await fetchTagsShow()
   }
 
-  const props: HandleProps = {
-    handle: getData,
-    args: 'headerLink',
+  const data = await getData()
+
+  const props: DataProps = {
+    data: data
   }
 
   return (

diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
@@ -3,7 +3,7 @@ import Logo from '~/components/layout/Logo'
 import DynamicNavbar from '~/components/layout/DynamicNavbar'
 import HeaderLink from '~/components/layout/HeaderLink'
 import { fetchTagsShow } from '~/server/lib/query'
-import {  LinkProps } from '~/types'
+import { DataProps } from '~/types'
 
 export default async function Header() {
   const getData = async () => {
@@ -13,9 +13,7 @@ export default async function Header() {
 
   const data = await getData()
 
-  const props: LinkProps = {
-    handle: getData,
-    args: 'headerLink',
+  const props: DataProps = {
     data: data
   }
 

diff --git a/components/layout/HeaderLink.tsx b/components/layout/HeaderLink.tsx
@@ -1,19 +1,14 @@
 'use client'
 
 import { Button } from '@nextui-org/react'
-import { TagType, LinkProps } from '~/types'
+import { TagType } from '~/types'
 import { usePathname } from 'next/navigation'
 import { useRouter } from 'next-nprogress-bar'
-import useSWR from 'swr'
+import { DataProps } from '~/types'
 
-export default function HeaderLink(props: Readonly<LinkProps>) {
-  const { data } = useSWR(props.args,
-    () => {
-      return props.handle
-    }, { revalidateOnFocus: false, fallbackData: props.data })
+export default function HeaderLink(props: Readonly<DataProps>) {
   const pathname = usePathname()
   const router = useRouter()
-
   return (
     <>
       <Button
@@ -25,7 +20,7 @@ export default function HeaderLink(props: Readonly<LinkProps>) {
       >
         首页
       </Button>
-      {Array.isArray(data) && data?.map((tag: TagType) => (
+      {Array.isArray(props.data) && props.data?.map((tag: TagType) => (
         <Button
           key={tag.id}
           color="primary"

diff --git a/components/layout/VaulDrawer.tsx b/components/layout/VaulDrawer.tsx
@@ -50,6 +50,7 @@ export default function VaulDrawer() {
                         key="home"
                         startContent={<Home size={20} className={iconClasses} />}
                         onClick={() => router.push('/')}
+                        className={pathname === '/' ? 'bg-gray-100' : ''}
                       >
                         <Drawer.Close className="w-full text-left">
                           首页
@@ -59,6 +60,7 @@ export default function VaulDrawer() {
                         key="admin"
                         startContent={<MonitorDot size={20} className={iconClasses} />}
                         onClick={() => router.push('/admin')}
+                        className={pathname === '/admin' ? 'bg-gray-100' : ''}
                       >
                         <Drawer.Close className="w-full text-left">
                           控制台
@@ -68,6 +70,7 @@ export default function VaulDrawer() {
                         key="upload"
                         startContent={<ImageUp size={20} className={iconClasses} />}
                         onClick={() => router.push('/admin/upload')}
+                        className={pathname === '/admin/upload' ? 'bg-gray-100' : ''}
                       >
                         <Drawer.Close className="w-full text-left">
                           上传
@@ -77,6 +80,7 @@ export default function VaulDrawer() {
                         key="list"
                         startContent={<Image size={20} className={iconClasses} />}
                         onClick={() => router.push('/admin/list')}
+                        className={pathname === '/admin/list' ? 'bg-gray-100' : ''}
                       >
                         <Drawer.Close className="w-full text-left">
                           图片维护
@@ -86,6 +90,7 @@ export default function VaulDrawer() {
                         key="tag"
                         startContent={<Milestone size={20} className={iconClasses} />}
                         onClick={() => router.push('/admin/tag')}
+                        className={pathname === '/admin/tag' ? 'bg-gray-100' : ''}
                       >
                         <Drawer.Close className="w-full text-left">
                           标签管理
@@ -95,6 +100,7 @@ export default function VaulDrawer() {
                         key="settings"
                         startContent={<Settings size={20} className={iconClasses} />}
                         onClick={() => router.push('/admin/settings/preferences')}
+                        className={pathname.startsWith('/admin/settings') ? 'bg-gray-100' : ''}
                         showDivider
                       >
                         <Drawer.Close className="w-full text-left">
@@ -127,6 +133,7 @@ export default function VaulDrawer() {
                         key="home"
                         onClick={() => router.push('/')}
                         startContent={<Home size={20} className={iconClasses} />}
+                        className={pathname === '/' ? 'bg-gray-100' : ''}
                       >
                         <Drawer.Close className="w-full text-left">
                           首页