feat: add top navbar to /share page, move nav links out of upload zone
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]
This commit is contained in:
loveuer
2026-03-01 23:38:15 -08:00
parent 62e8acf757
commit 050075d9c8
3 changed files with 103 additions and 47 deletions

View File

@@ -0,0 +1,81 @@
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>
);
};