feat: 添加退出登录按钮(桌面Header + 移动端"我"页面)
- Header: 桌面端右上角退出图标,带确认弹窗 - Me页面: 底部退出登录按钮,带确认弹窗 Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
@@ -1,20 +1,33 @@
|
|||||||
/** 顶部 Header(h-14 sticky)
|
/** 顶部 Header(h-14 sticky)
|
||||||
* 桌面:显示当前页面标题 + 用户信息
|
* 桌面:显示当前页面标题 + 用户信息 + 退出按钮
|
||||||
* 移动:显示 Logo + 通知铃铛
|
* 移动:显示 Logo + 通知铃铛
|
||||||
*/
|
*/
|
||||||
import { useLocation } from 'react-router-dom'
|
import { useState } from 'react'
|
||||||
import { Bell } from 'lucide-react'
|
import { useLocation, useNavigate } from 'react-router-dom'
|
||||||
|
import { Bell, LogOut } from 'lucide-react'
|
||||||
import { HEADER_TITLES } from '@/lib/nav-config'
|
import { HEADER_TITLES } from '@/lib/nav-config'
|
||||||
import { getName } from '@/lib/auth'
|
import { getName, clearAuth } from '@/lib/auth'
|
||||||
|
import {
|
||||||
|
Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter,
|
||||||
|
} from '@/components/ui/dialog'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
|
||||||
export function Header() {
|
export function Header() {
|
||||||
const { pathname } = useLocation()
|
const { pathname } = useLocation()
|
||||||
|
const navigate = useNavigate()
|
||||||
const name = getName()
|
const name = getName()
|
||||||
|
const [confirmLogout, setConfirmLogout] = useState(false)
|
||||||
|
|
||||||
// 匹配标题(支持子路由,取最长匹配)
|
// 匹配标题(支持子路由,取最长匹配)
|
||||||
const title = Object.entries(HEADER_TITLES)
|
const title = Object.entries(HEADER_TITLES)
|
||||||
.filter(([p]) => pathname === p || (p !== '/' && pathname.startsWith(p)))
|
.filter(([p]) => pathname === p || (p !== '/' && pathname.startsWith(p)))
|
||||||
.sort((a, b) => b[0].length - a[0].length)[0]?.[1] || '左右 BossAi'
|
.sort((a, b) => b[0].length - a[0].length)[0]?.[1] || '左右 BossAi'
|
||||||
|
|
||||||
|
const handleLogout = () => {
|
||||||
|
clearAuth()
|
||||||
|
navigate('/login')
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header className="sticky top-0 z-20 flex h-14 items-center gap-3 border-b border-border bg-white/95 px-4 backdrop-blur md:px-6">
|
<header className="sticky top-0 z-20 flex h-14 items-center gap-3 border-b border-border bg-white/95 px-4 backdrop-blur md:px-6">
|
||||||
{/* 移动端 Logo */}
|
{/* 移动端 Logo */}
|
||||||
@@ -36,6 +49,28 @@ export function Header() {
|
|||||||
{name && (
|
{name && (
|
||||||
<span className="hidden text-sm text-muted-foreground md:inline">{name}</span>
|
<span className="hidden text-sm text-muted-foreground md:inline">{name}</span>
|
||||||
)}
|
)}
|
||||||
|
{/* 退出按钮(桌面) */}
|
||||||
|
<button
|
||||||
|
onClick={() => setConfirmLogout(true)}
|
||||||
|
className="hidden h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-red-50 hover:text-red-600 md:flex"
|
||||||
|
aria-label="退出登录"
|
||||||
|
>
|
||||||
|
<LogOut className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* 退出确认弹窗 */}
|
||||||
|
<Dialog open={confirmLogout} onOpenChange={setConfirmLogout}>
|
||||||
|
<DialogContent className="max-w-sm">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>退出登录</DialogTitle>
|
||||||
|
<DialogDescription>确定要退出当前账号吗?</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setConfirmLogout(false)}>取消</Button>
|
||||||
|
<Button variant="destructive" onClick={handleLogout}>退出</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
</header>
|
</header>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
+38
-4
@@ -1,13 +1,25 @@
|
|||||||
/** 移动端"我"聚合页:头像占位+入口列表 */
|
/** 移动端"我"聚合页:头像占位+入口列表+退出 */
|
||||||
import { NavLink } from 'react-router-dom'
|
import { useState } from 'react'
|
||||||
|
import { NavLink, useNavigate } from 'react-router-dom'
|
||||||
import {
|
import {
|
||||||
User, History, BookOpen, Settings as SettingsIcon, ChevronRight,
|
User, History, BookOpen, Settings as SettingsIcon, ChevronRight,
|
||||||
Scale, TrendingUp, Heart, ShieldCheck, FileText, Users,
|
Scale, TrendingUp, Heart, ShieldCheck, FileText, Users, LogOut,
|
||||||
} from 'lucide-react'
|
} from 'lucide-react'
|
||||||
import { getName } from '@/lib/auth'
|
import { getName, clearAuth } from '@/lib/auth'
|
||||||
|
import {
|
||||||
|
Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter,
|
||||||
|
} from '@/components/ui/dialog'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
|
||||||
export function Me() {
|
export function Me() {
|
||||||
|
const navigate = useNavigate()
|
||||||
const name = getName()
|
const name = getName()
|
||||||
|
const [confirmLogout, setConfirmLogout] = useState(false)
|
||||||
|
|
||||||
|
const handleLogout = () => {
|
||||||
|
clearAuth()
|
||||||
|
navigate('/login')
|
||||||
|
}
|
||||||
const brainTrust = [
|
const brainTrust = [
|
||||||
{ path: '/legal', label: '法务参谋', icon: Scale },
|
{ path: '/legal', label: '法务参谋', icon: Scale },
|
||||||
{ path: '/decisions', label: '经营决策', icon: TrendingUp },
|
{ path: '/decisions', label: '经营决策', icon: TrendingUp },
|
||||||
@@ -61,6 +73,28 @@ export function Me() {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* 退出登录 */}
|
||||||
|
<button
|
||||||
|
onClick={() => setConfirmLogout(true)}
|
||||||
|
className="flex w-full items-center justify-center gap-2 rounded-xl border border-border bg-card p-4 text-sm text-red-600 transition-colors hover:bg-red-50"
|
||||||
|
>
|
||||||
|
<LogOut className="h-4 w-4" />
|
||||||
|
退出登录
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<Dialog open={confirmLogout} onOpenChange={setConfirmLogout}>
|
||||||
|
<DialogContent className="max-w-sm">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>退出登录</DialogTitle>
|
||||||
|
<DialogDescription>确定要退出当前账号吗?</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setConfirmLogout(false)}>取消</Button>
|
||||||
|
<Button variant="destructive" onClick={handleLogout}>退出</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user