Skip to content

Commit

Permalink
feat: 采用新的图标
Browse files Browse the repository at this point in the history
  • Loading branch information
@besscroft
besscroft committed Apr 7, 2024
1 parent fd33be0 commit 95dfaf7
Show file tree
Hide file tree
Showing 9 changed files with 71 additions and 142 deletions.
18 changes: 6 additions & 12 deletions app/admin/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,16 @@ export default async function Admin() {
<div className="flex flex-col space-y-2 h-full flex-1">
<Card>
<CardBody>
<p>
{user ?
<div>
<p>控制台（已登录）</p>
</div>
:
'控制台（未登录）'
}
</p>
{user ?
<p>控制台（已登录）</p>
:
'控制台（未登录）'
}
</CardBody>
</Card>
<Card className="flex-1">
<CardBody>
<p>
<p>{JSON.stringify(user)}</p>
</p>
<p>{JSON.stringify(user)}</p>
</CardBody>
</Card>
</div>
Expand Down
15 changes: 6 additions & 9 deletions components/BaseSide.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
'use client'

import { Listbox, ListboxItem } from '@nextui-org/react'
import {
MonitorMobileIcon,
LockFilledIcon,
} from '@nextui-org/shared-icons'
import { useSession } from 'next-auth/react'
import { usePathname, useRouter } from 'next/navigation'
import { BookmarkIcon, DesktopIcon, GearIcon, Pencil2Icon, RocketIcon } from '@radix-ui/react-icons'

export const BaseSide = () => {
const { data: session, status } = useSession()
Expand All @@ -25,39 +22,39 @@ export const BaseSide = () => {
<ListboxItem
className={pathname === '/admin' ? 'text-teal-300 ' + buttonClasses : buttonClasses}
key="home"
startContent={<MonitorMobileIcon className={iconClasses}/>}
startContent={<DesktopIcon className={iconClasses}/>}
onClick={() => router.push('/admin')}
>
控制台
</ListboxItem>
<ListboxItem
className={pathname === '/admin/upload' ? 'text-teal-300 ' + buttonClasses : buttonClasses}
key="upload"
startContent={<MonitorMobileIcon className={iconClasses}/>}
startContent={<RocketIcon className={iconClasses}/>}
onClick={() => router.push('/admin/upload')}
>
上传
</ListboxItem>
<ListboxItem
className={pathname === '/admin/list' ? 'text-teal-300 ' + buttonClasses : buttonClasses}
key="list"
startContent={<MonitorMobileIcon className={iconClasses}/>}
startContent={<Pencil2Icon className={iconClasses}/>}
onClick={() => router.push('/admin/list')}
>
图片维护
</ListboxItem>
<ListboxItem
className={pathname === '/admin/tag' ? 'text-teal-300 ' + buttonClasses : buttonClasses}
key="tag"
startContent={<MonitorMobileIcon className={iconClasses}/>}
startContent={<BookmarkIcon className={iconClasses}/>}
onClick={() => router.push('/admin/tag')}
>
标签管理
</ListboxItem>
<ListboxItem
className={pathname === '/admin/settings' ? 'text-teal-400 ' + buttonClasses : buttonClasses}
key="settings"
startContent={<LockFilledIcon className={iconClasses}/>}
startContent={<GearIcon className={iconClasses}/>}
onClick={() => router.push('/admin/settings')}
>
设置
Expand Down
25 changes: 10 additions & 15 deletions components/DropMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,9 @@ import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Avatar } from '@
import { usePathname, useRouter } from 'next/navigation'
import { loginOut } from '~/server/lib/actions'
import { useSession } from 'next-auth/react'
import { CameraIcon } from '~/style/icons/Camera'
import { AvatarIcon, MonitorMobileIcon, CloseIcon, AnchorIcon, MoonFilledIcon, SunFilledIcon } from '@nextui-org/shared-icons'
import { GithubIcon } from '~/style/icons/GitHub'
import { useEffect, useState } from 'react'
import { useTheme } from 'next-themes'
import { DesktopIcon, ExitIcon, GitHubLogoIcon, HomeIcon, MoonIcon, PersonIcon, SunIcon } from '@radix-ui/react-icons'

export const DropMenu = () => {
const router = useRouter()
Expand All @@ -33,9 +31,6 @@ export const DropMenu = () => {
size="sm"
isBordered
src={session?.user?.image || ''}
fallback={
<CameraIcon className="animate-pulse w-6 h-6 text-default-500" fill="currentColor" size={20} />
}
/>
</DropdownTrigger>
{
Expand All @@ -45,23 +40,23 @@ export const DropMenu = () => {
pathname.startsWith('/admin') ?
<DropdownItem
key="home"
startContent={<AnchorIcon className={iconClasses} />}
startContent={<HomeIcon className={iconClasses} />}
onClick={() => router.push('/')}
>
首页
</DropdownItem>
:
<DropdownItem
key="admin"
startContent={<MonitorMobileIcon className={iconClasses} />}
startContent={<DesktopIcon className={iconClasses} />}
onClick={() => router.push('/admin')}
>
后台
控制台
</DropdownItem>
}
<DropdownItem
key="loginOut"
startContent={<CloseIcon className={iconClasses} />}
startContent={<ExitIcon className={iconClasses} />}
showDivider
>
<div onClick={async () => {
Expand All @@ -72,14 +67,14 @@ export const DropMenu = () => {
</DropdownItem>
<DropdownItem
key="theme"
startContent={theme === 'light' ? <SunFilledIcon className={iconClasses} /> : <MoonFilledIcon className={iconClasses} />}
startContent={theme === 'light' ? <SunIcon className={iconClasses} /> : <MoonIcon className={iconClasses} />}
onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
>
{ theme === 'light' ? '切换至⌈常夜⌋' : '切换至⌈白夜⌋' }
</DropdownItem>
<DropdownItem
key="github"
startContent={<GithubIcon className={iconClasses} />}
startContent={<GitHubLogoIcon className={iconClasses} />}
onClick={() => router.push('https://github.com/besscroft')}
>
GitHub
Expand All @@ -91,20 +86,20 @@ export const DropMenu = () => {
key="login"
showDivider
onClick={() => router.push('/login')}
startContent={<AvatarIcon className={iconClasses} />}
startContent={<PersonIcon className={iconClasses} />}
>
登录
</DropdownItem>
<DropdownItem
key="theme"
startContent={theme === 'light' ? <SunFilledIcon className={iconClasses} /> : <MoonFilledIcon className={iconClasses} />}
startContent={theme === 'light' ? <SunIcon className={iconClasses} /> : <MoonIcon className={iconClasses} />}
onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
>
{ theme === 'light' ? '切换至⌈常夜⌋' : '切换至⌈白夜⌋' }
</DropdownItem>
<DropdownItem
key="github"
startContent={<GithubIcon className={iconClasses} />}
startContent={<GitHubLogoIcon className={iconClasses} />}
onClick={() => router.push('https://github.com/besscroft')}
>
GitHub
Expand Down
65 changes: 37 additions & 28 deletions components/VaulDrawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,25 @@
import { Drawer } from 'vaul'
import { usePathname, useRouter } from 'next/navigation'
import { Listbox, ListboxItem } from '@nextui-org/react'
import {
AnchorIcon,
AvatarIcon,
CloseIcon,
LockFilledIcon,
MonitorMobileIcon,
MoonFilledIcon,
SunFilledIcon
} from '@nextui-org/shared-icons'
import { useSession } from 'next-auth/react'
import { useEffect, useState } from 'react'
import { useTheme } from 'next-themes'
import { loginOut } from '~/server/lib/actions'
import { AppIcon } from '~/style/icons/App'
import {
BookmarkIcon,
DashboardIcon,
DesktopIcon,
ExitIcon,
GearIcon,
HomeIcon,
InfoCircledIcon,
MoonIcon,
Pencil2Icon,
PersonIcon,
RocketIcon,
SunIcon
} from '@radix-ui/react-icons'


export default function VaulDrawer() {
const { data: session, status } = useSession()
Expand All @@ -36,7 +41,7 @@ export default function VaulDrawer() {
return (
<Drawer.Root>
<Drawer.Trigger>
<AppIcon aria-label="菜单" className="rounded dark:bg-blue-50" />
<DashboardIcon aria-label="菜单" className="rounded dark:bg-blue-50" />
</Drawer.Trigger>
<Drawer.Portal>
<Drawer.Overlay className="fixed inset-0 bg-black/40 dark:bg-slate-800" />
Expand All @@ -55,7 +60,7 @@ export default function VaulDrawer() {
pathname === '/admin' ?
<ListboxItem
key="home"
startContent={<AnchorIcon className={iconClasses} />}
startContent={<HomeIcon className={iconClasses} />}
onClick={() => router.push('/')}
>
<Drawer.Close className="w-full text-left">
Expand All @@ -65,27 +70,27 @@ export default function VaulDrawer() {
:
<ListboxItem
key="home"
startContent={<MonitorMobileIcon className={iconClasses} />}
startContent={<DesktopIcon className={iconClasses} />}
onClick={() => router.push('/admin')}
>
<Drawer.Close className="w-full text-left">
后台
控制台
</Drawer.Close>
</ListboxItem>
:
<ListboxItem
key="home"
startContent={<MonitorMobileIcon className={iconClasses} />}
startContent={<DesktopIcon className={iconClasses} />}
onClick={() => router.push('/admin')}
>
<Drawer.Close className="w-full text-left">
后台
控制台
</Drawer.Close>
</ListboxItem>
}
<ListboxItem
key="upload"
startContent={<LockFilledIcon className={iconClasses} />}
startContent={<RocketIcon className={iconClasses} />}
onClick={() => router.push('/admin/upload')}
>
<Drawer.Close className="w-full text-left">
Expand All @@ -94,7 +99,7 @@ export default function VaulDrawer() {
</ListboxItem>
<ListboxItem
key="list"
startContent={<LockFilledIcon className={iconClasses} />}
startContent={<Pencil2Icon className={iconClasses} />}
onClick={() => router.push('/admin/list')}
>
<Drawer.Close className="w-full text-left">
Expand All @@ -103,7 +108,7 @@ export default function VaulDrawer() {
</ListboxItem>
<ListboxItem
key="tag"
startContent={<LockFilledIcon className={iconClasses} />}
startContent={<BookmarkIcon className={iconClasses} />}
onClick={() => router.push('/admin/tag')}
>
<Drawer.Close className="w-full text-left">
Expand All @@ -112,7 +117,7 @@ export default function VaulDrawer() {
</ListboxItem>
<ListboxItem
key="settings"
startContent={<LockFilledIcon className={iconClasses} />}
startContent={<GearIcon className={iconClasses} />}
onClick={() => router.push('/admin/settings')}
showDivider
>
Expand All @@ -122,7 +127,7 @@ export default function VaulDrawer() {
</ListboxItem>
<ListboxItem
key="loginOut"
startContent={<CloseIcon className={iconClasses} />}
startContent={<ExitIcon className={iconClasses} />}
>
<div onClick={async () => {
await loginOut()
Expand All @@ -132,7 +137,7 @@ export default function VaulDrawer() {
</ListboxItem>
<ListboxItem
key="theme"
startContent={theme === 'light' ? <SunFilledIcon className={iconClasses} /> : <MoonFilledIcon className={iconClasses} />}
startContent={theme === 'light' ? <SunIcon className={iconClasses} /> : <MoonIcon className={iconClasses} />}
onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
>
{ theme === 'light' ? '切换至⌈常夜⌋' : '切换至⌈白夜⌋' }
Expand All @@ -145,28 +150,32 @@ export default function VaulDrawer() {
<ListboxItem
key="home"
onClick={() => router.push('/')}
startContent={<AvatarIcon className={iconClasses} />}
startContent={<HomeIcon className={iconClasses} />}
>
首页
<Drawer.Close className="w-full text-left">
首页
</Drawer.Close>
</ListboxItem>
<ListboxItem
key="about"
showDivider
onClick={() => router.push('/about')}
startContent={<AvatarIcon className={iconClasses} />}
startContent={<InfoCircledIcon className={iconClasses} />}
>
关于
<Drawer.Close className="w-full text-left">
关于
</Drawer.Close>
</ListboxItem>
<ListboxItem
key="login"
onClick={() => router.push('/login')}
startContent={<AvatarIcon className={iconClasses} />}
startContent={<PersonIcon className={iconClasses} />}
>
登录
</ListboxItem>
<ListboxItem
key="theme"
startContent={theme === 'light' ? <SunFilledIcon className={iconClasses} /> : <MoonFilledIcon className={iconClasses} />}
startContent={theme === 'light' ? <SunIcon className={iconClasses} /> : <MoonIcon className={iconClasses} />}
onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
>
{ theme === 'light' ? '切换至⌈常夜⌋' : '切换至⌈白夜⌋' }
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"@auth/prisma-adapter": "^1.5.2",
"@nextui-org/react": "^2.2.10",
"@prisma/client": "^5.12.1",
"@radix-ui/react-icons": "^1.3.0",
"crypto-js": "^4.2.0",
"framer-motion": "^11.0.24",
"next": "^14.1.4",
Expand Down
11 changes: 11 additions & 0 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 95dfaf7

Please sign in to comment.