generated from kevisual/vite-react-template
feat: 优化导航链接的点击处理和类型定义
This commit is contained in:
@@ -51,18 +51,27 @@ export const BaseHeader = (props: { main?: React.ComponentType | null }) => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="flex gap-2 text-lg w-full h-12 items-center justify-between bg-gray-200">
|
<div className="flex gap-2 text-lg w-full h-12 items-center justify-between bg-gray-200">
|
||||||
<div className='px-2'>
|
<div className='px-2 flex items-center gap-1'>
|
||||||
{
|
{
|
||||||
store.links.map(link => (
|
store.links.map(link => (
|
||||||
<Link
|
<div key={link.key || link.title}
|
||||||
key={link.key || link.title}
|
className="cursor-pointer flex items-center justify-center gap-1 p-2 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
|
||||||
to={link.href}
|
onClick={() => {
|
||||||
className="px-3 py-1.5 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
|
if (!link.href) return;
|
||||||
|
if (link.href.startsWith('http') || link.isRoot) {
|
||||||
|
window.open(link.href, '_blank');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
navigate({
|
||||||
|
to: link.href
|
||||||
|
})
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{link.key === 'home' && <Home className="w-4 h-4 mr-1" />}
|
{link.key === 'home' && <Home className="w-4 h-4" />}
|
||||||
{link.icon && <span className="mr-1">{link.icon}</span>}
|
{link.icon && <>{link.icon}</>}
|
||||||
{link.title}
|
{!link.icon && link.title}
|
||||||
</Link>
|
</div>
|
||||||
|
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -34,13 +34,15 @@ export type LayoutStore = {
|
|||||||
};
|
};
|
||||||
setLoginPageConfig: (config: Partial<LayoutStore['loginPageConfig']>) => void;
|
setLoginPageConfig: (config: Partial<LayoutStore['loginPageConfig']>) => void;
|
||||||
links: HeaderLink[];
|
links: HeaderLink[];
|
||||||
|
setLinks: (links: HeaderLink[]) => void;
|
||||||
};
|
};
|
||||||
type HeaderLink = {
|
type HeaderLink = {
|
||||||
title: string;
|
title?: string;
|
||||||
href: string;
|
href: string;
|
||||||
description?: string;
|
description?: string;
|
||||||
icon?: React.ReactNode;
|
icon?: React.ReactNode;
|
||||||
key?: string;
|
key?: string;
|
||||||
|
isRoot?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const useLayoutStore = create<LayoutStore>((set, get) => ({
|
export const useLayoutStore = create<LayoutStore>((set, get) => ({
|
||||||
@@ -78,19 +80,12 @@ export const useLayoutStore = create<LayoutStore>((set, get) => ({
|
|||||||
const token = await queryLogin.getToken();
|
const token = await queryLogin.getToken();
|
||||||
if (token) {
|
if (token) {
|
||||||
set({ me: {} })
|
set({ me: {} })
|
||||||
let me: UserInfo | undefined = undefined;
|
const me = await queryLogin.getMe();
|
||||||
|
// const user = await queryLogin.checkLocalUser() as UserInfo;
|
||||||
const _user = await queryLogin.checkLocalUser() as UserInfo;
|
const user = me.code === 200 ? me.data : undefined;
|
||||||
if (_user) {
|
if (user) {
|
||||||
me = _user;
|
set({ me: user });
|
||||||
}
|
set({ isAdmin: user.orgs?.includes?.('admin') || false });
|
||||||
if (!me) {
|
|
||||||
const res = await queryLogin.getMe();
|
|
||||||
me = res.code === 200 ? res.data : undefined;
|
|
||||||
}
|
|
||||||
if (me) {
|
|
||||||
set({ me: me });
|
|
||||||
set({ isAdmin: me.orgs?.includes?.('admin') || false });
|
|
||||||
} else {
|
} else {
|
||||||
set({ me: undefined, isAdmin: false });
|
set({ me: undefined, isAdmin: false });
|
||||||
}
|
}
|
||||||
@@ -107,4 +102,5 @@ export const useLayoutStore = create<LayoutStore>((set, get) => ({
|
|||||||
loginPageConfig: { ...state.loginPageConfig, ...config },
|
loginPageConfig: { ...state.loginPageConfig, ...config },
|
||||||
})),
|
})),
|
||||||
links: [{ title: '', href: '/', key: 'home' }],
|
links: [{ title: '', href: '/', key: 'home' }],
|
||||||
|
setLinks: (links) => set({ links }),
|
||||||
}));
|
}));
|
||||||
|
|||||||
Reference in New Issue
Block a user