050075d9c8
Some checks failed
Release Binaries / Build and Release (.exe, amd64, windows, windows-amd64) (push) Has been cancelled
Release Binaries / Build and Release (amd64, darwin, darwin-amd64) (push) Has been cancelled
Release Binaries / Build and Release (amd64, linux, linux-amd64) (push) Has been cancelled
Release Binaries / Build and Release (arm64, darwin, darwin-arm64) (push) Has been cancelled
Release Binaries / Build and Release (arm64, linux, linux-arm64) (push) Has been cancelled
- Add NavBar component with app branding and conditional nav links - NavBar shows "个人中心" for token_manage permission, "管理控制台" for user_manage - Restructure share.tsx with flex column layout (NavBar + 3-column grid) - Clean up panel-left.tsx: remove auth check, nav links, and unused styles 🤖 Generated with [Qoder][https://qoder.com]
82 lines
2.3 KiB
TypeScript
82 lines
2.3 KiB
TypeScript
import React, {useEffect, useState} from 'react';
|
|
import {createUseStyles} from 'react-jss';
|
|
|
|
const useStyle = createUseStyles({
|
|
nav: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
padding: '0 24px',
|
|
height: '48px',
|
|
backgroundColor: '#2c9678',
|
|
boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
|
|
flexShrink: 0,
|
|
},
|
|
brand: {
|
|
color: 'white',
|
|
fontWeight: 700,
|
|
fontSize: '18px',
|
|
letterSpacing: '1px',
|
|
textDecoration: 'none',
|
|
},
|
|
links: {
|
|
display: 'flex',
|
|
gap: '8px',
|
|
alignItems: 'center',
|
|
},
|
|
link: {
|
|
color: 'rgba(255,255,255,0.9)',
|
|
fontSize: '13px',
|
|
textDecoration: 'none',
|
|
padding: '5px 12px',
|
|
borderRadius: '4px',
|
|
transition: 'background-color 0.2s',
|
|
'&:hover': {
|
|
backgroundColor: 'rgba(255,255,255,0.2)',
|
|
color: 'white',
|
|
},
|
|
},
|
|
divider: {
|
|
color: 'rgba(255,255,255,0.4)',
|
|
fontSize: '13px',
|
|
},
|
|
});
|
|
|
|
export const NavBar: React.FC = () => {
|
|
const style = useStyle();
|
|
const [isAdmin, setIsAdmin] = useState(false);
|
|
const [hasTokenPerm, setHasTokenPerm] = useState(false);
|
|
|
|
useEffect(() => {
|
|
fetch('/api/uauth/me').then(async res => {
|
|
if (res.ok) {
|
|
const json = await res.json();
|
|
const perms: string[] = json.data?.permissions ?? [];
|
|
setIsAdmin(perms.includes('user_manage'));
|
|
setHasTokenPerm(perms.includes('token_manage'));
|
|
}
|
|
}).catch(() => {});
|
|
}, []);
|
|
|
|
const showLinks = isAdmin || hasTokenPerm;
|
|
|
|
return (
|
|
<nav className={style.nav}>
|
|
<a href="/share" className={style.brand}>UShare</a>
|
|
{showLinks && (
|
|
<div className={style.links}>
|
|
{hasTokenPerm && (
|
|
<a href="/self" className={style.link}>个人中心</a>
|
|
)}
|
|
{isAdmin && hasTokenPerm && (
|
|
<span className={style.divider}>|</span>
|
|
)}
|
|
{isAdmin && (
|
|
<a href="/admin" className={style.link}>管理控制台</a>
|
|
)}
|
|
</div>
|
|
)}
|
|
</nav>
|
|
);
|
|
};
|