lanhu/web
2
0
Fork 0
Code Issues Actions Packages Releases 13 Activity

实现个人中心下拉菜单；更新部分 eslint 规则

Browse Source
This commit is contained in:
luorijun
2025-06-06 18:41:19 +08:00
parent 1d0008fd4d
commit cc39317fdf
14 changed files with 917 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/app/(home)/@header/_client/provider.tsx
View File

@@ -10,6 +10,7 @@ import Wrap from '@/components/wrap'
import logo from '@/assets/logo.webp'
import {Button} from '@/components/ui/button'
import {useProfileStore} from '@/components/providers/StoreProvider'
import UserCenter from '@/components/composites/user-center'
export const HeaderContext = createContext<{
setMenu: (value: boolean) => void
@@ -18,7 +19,6 @@ export const HeaderContext = createContext<{
export type ProviderProps = {}
export default function Provider(props: ProviderProps) {
// ======================
// 滚动条状态
// ======================
@@ -45,9 +45,9 @@ export default function Provider(props: ProviderProps) {
const [menu, setMenu] = useState(false)
const [page, setPage] = useState(0)
const pages = useMemo(() => [
<ProductMenu key={`product`}/>,
<SolutionMenu key={`solution`}/>,
<HelpMenu key={`help`}/>,
<ProductMenu key="product"/>,
<SolutionMenu key="solution"/>,
<HelpMenu key="help"/>,
], [])
// ======================
@@ -73,16 +73,16 @@ export default function Provider(props: ProviderProps) {
<Wrap className="h-20 max-md:h-16 flex justify-between">
<div className="flex justify-between gap-8">
{/* logo */}
<Link href="/" className={`flex items-center`}>
<Image src={logo} alt={`logo`} height={48}/>
<Link href="/" className="flex items-center">
<Image src={logo} alt="logo" height={48}/>
</Link>
{/* 菜单 */}
<nav>
<ul className="h-full flex items-stretch max-lg:hidden">
<LinkItem text={`首页`} href={`/`}/>
<LinkItem text="首页" href="/"/>
<MenuItem
text={`产品订购`}
text="产品订购"
active={menu && page === 0}
onEnter={() => {
setMenu(true)
@@ -93,7 +93,7 @@ export default function Provider(props: ProviderProps) {
}}
/>
<MenuItem
text={`业务场景`}
text="业务场景"
active={menu && page === 1}
onEnter={() => {
setMenu(true)
@@ -104,7 +104,7 @@ export default function Provider(props: ProviderProps) {
}}
/>
<MenuItem
text={`帮助中心`}
text="帮助中心"
active={menu && page === 2}
onEnter={() => {
setMenu(true)
@@ -115,39 +115,44 @@ export default function Provider(props: ProviderProps) {
}}
/>
<LinkItem
text={`企业服务`} href={`#`}/>
text="企业服务"
href="#"/>
<LinkItem
text={`推广返利`} href={`#`}/>
text="推广返利"
href="#"/>
</ul>
</nav>
</div>
{/* 登录 */}
<div className={`flex items-center`}>
<div className="flex items-center">
{profile == undefined
? <>
<Link
href="/login"
className={`w-24 h-12 flex items-center justify-center lg:text-lg`}
>
<span>登录</span>
</Link>
<Link
href="/login"
className={[
`w-20 lg:w-24 h-10 lg:h-12 bg-gradient-to-r rounded-sm flex items-center justify-center lg:text-lg text-white`,
`transition-colors duration-200 ease-in-out`,
`from-blue-500 to-cyan-400 hover:from-blue-500 hover:to-cyan-300`,
].join(' ')}
>
<span>注册</span>
</Link>
</>
? (
<>
<Link
href="/login"
className="w-24 h-12 flex items-center justify-center lg:text-lg"
>
<span>登录</span>
</Link>
<Link
href="/login"
className={[
`w-20 lg:w-24 h-10 lg:h-12 bg-gradient-to-r rounded-sm flex items-center justify-center lg:text-lg text-white`,
`transition-colors duration-200 ease-in-out`,
`from-blue-500 to-cyan-400 hover:from-blue-500 hover:to-cyan-300`,
].join(' ')}
>
<span>注册</span>
</Link>
</>
)
: (
<Link href={`/admin`}>
<Button theme={`gradient`} className={`h-12`}>
进入控制台
</Button>
</Link>
// <Link href="/admin">
// <Button theme="gradient" className="h-12">
// 进入控制台
// </Button>
// </Link>
<UserCenter/>
)
}
</div>
@@ -172,7 +177,3 @@ export default function Provider(props: ProviderProps) {
</HeaderContext.Provider>
)
}

9
src/app/admin/_client/header.tsx
View File

@@ -1,14 +1,13 @@
'use client'
import {PanelLeftCloseIcon, PanelLeftOpenIcon} from 'lucide-react'
import {Button} from '@/components/ui/button'
import Profile from './profile'
import {useLayoutStore} from '@/components/providers/StoreProvider'
import {merge} from '@/lib/utils'
import UserCenter from '@/components/composites/user-center'
export type HeaderProps = {}
export default function Header(props: HeaderProps) {
const navbar = useLayoutStore(store => store.navbar)
const toggleNavbar = useLayoutStore(store => store.toggleNavbar)
@@ -18,7 +17,7 @@ export default function Header(props: HeaderProps) {
`flex items-stretch`,
)}>
{/* left */}
<div className={`flex-auto flex items-center gap-2`}>
<div className="flex-auto flex items-center gap-2">
<Button
theme="ghost"
className="w-9 h-9"
@@ -34,8 +33,8 @@ export default function Header(props: HeaderProps) {
</div>
{/* right */}
<div className={`flex-none flex items-center justify-end pr-4`}>
<Profile/>
<div className="flex-none flex items-center justify-end pr-4">
<UserCenter/>
</div>
</header>
)

27
src/app/admin/_client/profile.tsx
View File

@@ -1,27 +0,0 @@
'use client'
import {Button} from '@/components/ui/button'
import {logout} from '@/actions/auth'
import {useProfileStore} from '@/components/providers/StoreProvider'
import {useRouter} from 'next/navigation'
export type ProfileProps = {}
export default function Profile(props: ProfileProps) {
const router = useRouter()
const refreshProfile = useProfileStore(store => store.refreshProfile)
const doLogout = async () => {
const resp = await logout()
if (resp.success) {
refreshProfile().then()
router.replace('/')
}
}
return (
<div className="flex gap-2 items-center">
<Button theme={`fail`} onClick={doLogout}>
退出登录
</Button>
</div>
)
}

4
src/app/globals.css
View File

@@ -20,6 +20,8 @@
--accent: oklch(0.769 0.188 70.08);
--accent-text: oklch(0.985 0.002 247.839);
--plain: oklch(0.65 0 0);
--done: oklch(0.65 0.16 145);
--done-text: oklch(1 0 0);
--done-muted: oklch(0.965 0.024 145);
@@ -73,6 +75,8 @@
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-text);
--color-plain: var(--plain);
--color-done: var(--done);
--color-done-foreground: var(--done-text);
--color-done-muted: var(--done-muted);