add3af7904
- 新增 ConfirmModal 组件，为6处危险操作添加二次确认弹窗 (禁用团队/用户/成员、删除视频×3处) - 所有秒数显示统一为千位分隔符+s后缀(如 36,000s) - 修复 modal/drawer 在 input 中拖拽导致误关闭的 bug (onClick → onMouseDown + e.target === e.currentTarget) - 团队模型完善：三种角色(超管/团管/成员)、四层额度检查、 团管成员管理页、超管团队管理页 - 关闭公开注册，所有账号由管理员创建 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
86 lines
3.7 KiB
TypeScript
86 lines
3.7 KiB
TypeScript
import { NavLink, Outlet, useNavigate } from 'react-router-dom';
|
|
import { useAuthStore } from '../store/auth';
|
|
import { useState } from 'react';
|
|
import styles from './AdminLayout.module.css';
|
|
|
|
const navItems = [
|
|
{ path: '/team/dashboard', label: '概览', icon: 'M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z' },
|
|
{ path: '/team/members', label: '成员管理', icon: 'M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z' },
|
|
];
|
|
|
|
export function TeamAdminLayout() {
|
|
const user = useAuthStore((s) => s.user);
|
|
const logout = useAuthStore((s) => s.logout);
|
|
const navigate = useNavigate();
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
|
|
const handleLogout = () => {
|
|
logout();
|
|
navigate('/login', { replace: true });
|
|
};
|
|
|
|
return (
|
|
<div className={styles.layout}>
|
|
<aside className={`${styles.sidebar} ${collapsed ? styles.collapsed : ''}`}>
|
|
<div className={styles.sidebarHeader}>
|
|
<div className={styles.logo}>
|
|
<svg viewBox="0 0 24 24" width="24" height="24" fill="var(--color-primary)">
|
|
<path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"/>
|
|
</svg>
|
|
{!collapsed && <span className={styles.logoText}>团队管理</span>}
|
|
</div>
|
|
<button className={styles.collapseBtn} onClick={() => setCollapsed(!collapsed)}>
|
|
<svg viewBox="0 0 24 24" width="16" height="16" fill="var(--color-text-secondary)">
|
|
{collapsed ? (
|
|
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
|
|
) : (
|
|
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
|
|
)}
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<nav className={styles.nav}>
|
|
<button className={styles.navItem} onClick={() => navigate('/')} style={{ border: 'none', background: 'transparent', cursor: 'pointer', textAlign: 'left', width: '100%' }}>
|
|
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
|
|
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
|
|
</svg>
|
|
{!collapsed && <span>返回首页</span>}
|
|
</button>
|
|
<div className={styles.navDivider} />
|
|
{navItems.map((item) => (
|
|
<NavLink
|
|
key={item.path}
|
|
to={item.path}
|
|
className={({ isActive }) =>
|
|
`${styles.navItem} ${isActive ? styles.navItemActive : ''}`
|
|
}
|
|
>
|
|
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
|
|
<path d={item.icon} />
|
|
</svg>
|
|
{!collapsed && <span>{item.label}</span>}
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
|
|
<div className={styles.sidebarFooter}>
|
|
<div className={styles.userInfo}>
|
|
<div className={styles.userAvatar}>{user?.username.charAt(0).toUpperCase()}</div>
|
|
{!collapsed && (
|
|
<div className={styles.userMeta}>
|
|
<span className={styles.userName}>{user?.username}</span>
|
|
<button className={styles.logoutLink} onClick={handleLogout}>退出</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<main className={`${styles.content} ${collapsed ? styles.contentExpanded : ''}`}>
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|