363 lines
13 KiB
TypeScript
363 lines
13 KiB
TypeScript
import { createPortal } from 'react-dom';
|
|
import { useEffect, useMemo, useState } from 'react';
|
|
import {
|
|
BadgeCheck,
|
|
Files,
|
|
History,
|
|
KeyRound,
|
|
LayoutDashboard,
|
|
LogOut,
|
|
MessageCircle,
|
|
MoonStar,
|
|
Rocket,
|
|
Settings2,
|
|
Shield,
|
|
SunMedium,
|
|
UserRound,
|
|
Users,
|
|
Waypoints,
|
|
Wrench,
|
|
} from 'lucide-react';
|
|
import type { LucideIcon } from 'lucide-react';
|
|
import { PasswordInput } from '../components/PasswordInput';
|
|
import { pickLocale } from '../i18n';
|
|
import { appZhCn } from '../i18n/app.zh-cn';
|
|
import { appEn } from '../i18n/app.en';
|
|
import { useAppStore } from '../store/appStore';
|
|
import type { SysAuthBootstrap, SysMenuItem } from '../types/sys';
|
|
|
|
const iconMap: Record<string, LucideIcon> = {
|
|
'layout-dashboard': LayoutDashboard,
|
|
waypoints: Waypoints,
|
|
wrench: Wrench,
|
|
'sliders-horizontal': Settings2,
|
|
files: Files,
|
|
rocket: Rocket,
|
|
shield: Shield,
|
|
users: Users,
|
|
'badge-check': BadgeCheck,
|
|
'layout-grid': LayoutDashboard,
|
|
'message-circle': MessageCircle,
|
|
'user-round': UserRound,
|
|
history: History,
|
|
'key-round': KeyRound,
|
|
};
|
|
|
|
export function ThemeLocaleSwitches() {
|
|
const { theme, setTheme, locale, setLocale } = useAppStore();
|
|
const t = pickLocale(locale, { 'zh-cn': appZhCn, en: appEn });
|
|
|
|
return (
|
|
<div className="global-switches">
|
|
<div className="switch-compact">
|
|
<button className={`switch-btn ${theme === 'dark' ? 'active' : ''}`} onClick={() => setTheme('dark')} aria-label={t.dark}>
|
|
<MoonStar size={14} />
|
|
</button>
|
|
<button className={`switch-btn ${theme === 'light' ? 'active' : ''}`} onClick={() => setTheme('light')} aria-label={t.light}>
|
|
<SunMedium size={14} />
|
|
</button>
|
|
</div>
|
|
<div className="switch-compact">
|
|
<button className={`switch-btn switch-btn-lang ${locale === 'zh' ? 'active' : ''}`} onClick={() => setLocale('zh')} aria-label={t.zh}>
|
|
<span>ZH</span>
|
|
</button>
|
|
<button className={`switch-btn switch-btn-lang ${locale === 'en' ? 'active' : ''}`} onClick={() => setLocale('en')} aria-label={t.en}>
|
|
<span>EN</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function CompactHeaderSwitches() {
|
|
const { theme, setTheme, locale, setLocale } = useAppStore();
|
|
const isZh = locale === 'zh';
|
|
|
|
return (
|
|
<div className="compact-header-switches">
|
|
<button
|
|
type="button"
|
|
className="compact-header-pill"
|
|
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
|
|
aria-label={isZh ? '切换主题' : 'Toggle theme'}
|
|
title={isZh ? '切换主题' : 'Toggle theme'}
|
|
>
|
|
{theme === 'dark' ? <MoonStar size={16} /> : <SunMedium size={16} />}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="compact-header-pill compact-header-pill-text"
|
|
onClick={() => setLocale(isZh ? 'en' : 'zh')}
|
|
aria-label={isZh ? '切换语言' : 'Toggle language'}
|
|
title={isZh ? '切换语言' : 'Toggle language'}
|
|
>
|
|
<span>{isZh ? 'ZH' : 'EN'}</span>
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
type DashboardLoginProps = {
|
|
username: string;
|
|
password: string;
|
|
submitting: boolean;
|
|
error: string;
|
|
onUsernameChange: (value: string) => void;
|
|
onPasswordChange: (value: string) => void;
|
|
onSubmit: () => void;
|
|
defaultUsername: string;
|
|
};
|
|
|
|
export function DashboardLogin({
|
|
username,
|
|
password,
|
|
submitting,
|
|
error,
|
|
onUsernameChange,
|
|
onPasswordChange,
|
|
onSubmit,
|
|
defaultUsername,
|
|
}: DashboardLoginProps) {
|
|
const { theme, locale } = useAppStore();
|
|
const passwordToggleLabels = locale === 'zh'
|
|
? { show: '显示密码', hide: '隐藏密码' }
|
|
: { show: 'Show password', hide: 'Hide password' };
|
|
|
|
return (
|
|
<div className="app-shell sys-login-shell" data-theme={theme}>
|
|
<div className="sys-login-layout">
|
|
<div className="app-login-card sys-login-card">
|
|
<div className="sys-login-brand">
|
|
<img src="/app-bot-icon.svg" alt="Nanobot" className="app-login-icon sys-login-logo" />
|
|
<h1>Nanobot</h1>
|
|
<p>{locale === 'zh' ? '用户登录' : 'User Sign In'}</p>
|
|
</div>
|
|
<div className="app-login-form">
|
|
<label className="field-label">{locale === 'zh' ? '用户名' : 'Username'}</label>
|
|
<input
|
|
className="input"
|
|
value={username}
|
|
onChange={(event) => onUsernameChange(event.target.value)}
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Enter') onSubmit();
|
|
}}
|
|
placeholder={defaultUsername || (locale === 'zh' ? '用户名' : 'Username')}
|
|
autoFocus
|
|
/>
|
|
<label className="field-label">{locale === 'zh' ? '密码' : 'Password'}</label>
|
|
<PasswordInput
|
|
className="input"
|
|
value={password}
|
|
onChange={(event) => onPasswordChange(event.target.value)}
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Enter') onSubmit();
|
|
}}
|
|
placeholder={locale === 'zh' ? '密码' : 'Password'}
|
|
toggleLabels={passwordToggleLabels}
|
|
/>
|
|
{error ? <div className="app-login-error">{error}</div> : null}
|
|
<button className="btn btn-primary app-login-submit sys-login-submit" onClick={onSubmit} disabled={submitting}>
|
|
{submitting ? (locale === 'zh' ? '登录中...' : 'Signing in...') : (locale === 'zh' ? '登录' : 'Sign In')}
|
|
</button>
|
|
<div className="sys-login-hint">
|
|
{locale === 'zh'
|
|
? `首次初始化默认账号：${defaultUsername || 'admin'}`
|
|
: `Initial seeded account: ${defaultUsername || 'admin'}`}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
type SidebarMenuProps = {
|
|
menus: SysMenuItem[];
|
|
activeMenuKey: string;
|
|
onNavigate: (path: string) => void;
|
|
};
|
|
|
|
export function SidebarMenu({ menus, activeMenuKey, onNavigate }: SidebarMenuProps) {
|
|
const { locale } = useAppStore();
|
|
|
|
return (
|
|
<nav className="sys-sidebar-nav">
|
|
{menus.map((group) => (
|
|
<section key={group.menu_key} className="sys-sidebar-group">
|
|
<div className="sys-sidebar-group-title">
|
|
{locale === 'zh' ? group.title : (group.title_en || group.title)}
|
|
</div>
|
|
<div className="sys-sidebar-group-items">
|
|
{(group.children || []).map((item) => {
|
|
const Icon = iconMap[item.icon || 'layout-dashboard'] || LayoutDashboard;
|
|
const active = item.menu_key === activeMenuKey;
|
|
return (
|
|
<button
|
|
key={item.menu_key}
|
|
type="button"
|
|
className={`sys-sidebar-item ${active ? 'is-active' : ''}`}
|
|
onClick={() => onNavigate(item.route_path)}
|
|
>
|
|
<Icon size={16} />
|
|
<span>{locale === 'zh' ? item.title : (item.title_en || item.title)}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
))}
|
|
</nav>
|
|
);
|
|
}
|
|
|
|
type SidebarAccountPillProps = {
|
|
authBootstrap: SysAuthBootstrap;
|
|
isZh: boolean;
|
|
onOpenProfile: () => void;
|
|
onLogout: () => void;
|
|
};
|
|
|
|
export function SidebarAccountPill({ authBootstrap, isZh, onOpenProfile, onLogout }: SidebarAccountPillProps) {
|
|
const username = String(authBootstrap.user.display_name || authBootstrap.user.username || '');
|
|
const subtitle = authBootstrap.user.role?.name || (isZh ? '账户设置' : 'Account settings');
|
|
|
|
return (
|
|
<div className="sys-user-pill sys-user-pill-sidebar">
|
|
<button className="sys-user-pill-main" type="button" onClick={onOpenProfile}>
|
|
<span className="sys-user-pill-avatar">{username.slice(0, 1).toUpperCase()}</span>
|
|
<span className="sys-user-pill-copy">
|
|
<strong>{username}</strong>
|
|
<span>{subtitle}</span>
|
|
</span>
|
|
</button>
|
|
<button className="sys-user-pill-action" type="button" onClick={onLogout} aria-label={isZh ? '退出登录' : 'Logout'} title={isZh ? '退出登录' : 'Logout'}>
|
|
<LogOut size={14} />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function isNormalUserRole(authBootstrap: SysAuthBootstrap) {
|
|
return String(authBootstrap.user.role?.role_key || '').trim().toLowerCase() === 'normal_user';
|
|
}
|
|
|
|
export function normalizeAssignedBotTone(enabled?: boolean, dockerStatus?: string) {
|
|
if (enabled === false) return 'is-disabled';
|
|
return String(dockerStatus || '').toUpperCase() === 'RUNNING' ? 'is-running' : 'is-stopped';
|
|
}
|
|
|
|
export function useResolvedAssignedBots(authBootstrap: SysAuthBootstrap) {
|
|
const activeBots = useAppStore((state) => state.activeBots);
|
|
return useMemo(() => {
|
|
const assigned = Array.isArray(authBootstrap.assigned_bots) ? authBootstrap.assigned_bots : [];
|
|
if (assigned.length === 0) return [];
|
|
const liveBotIds = new Set(Object.keys(activeBots).filter((botId) => String(botId || '').trim()));
|
|
const preferLiveIntersection = liveBotIds.size > 0;
|
|
return assigned
|
|
.filter((item) => !preferLiveIntersection || liveBotIds.has(String(item.id || '').trim()))
|
|
.map((item) => {
|
|
const live = activeBots[item.id];
|
|
return live
|
|
? {
|
|
id: live.id,
|
|
name: live.name || item.name,
|
|
enabled: live.enabled,
|
|
docker_status: live.docker_status,
|
|
node_id: live.node_id || item.node_id,
|
|
node_display_name: live.node_display_name || item.node_display_name || item.node_id,
|
|
}
|
|
: item;
|
|
})
|
|
.filter((item) => String(item.id || '').trim());
|
|
}, [activeBots, authBootstrap.assigned_bots]);
|
|
}
|
|
|
|
type BotSwitcherTriggerProps = {
|
|
authBootstrap: SysAuthBootstrap;
|
|
isZh: boolean;
|
|
selectedBotId: string;
|
|
onSelectBot: (botId: string) => void;
|
|
className?: string;
|
|
};
|
|
|
|
export function BotSwitcherTrigger({
|
|
authBootstrap,
|
|
isZh,
|
|
selectedBotId,
|
|
onSelectBot,
|
|
className,
|
|
}: BotSwitcherTriggerProps) {
|
|
const bots = useResolvedAssignedBots(authBootstrap);
|
|
const theme = useAppStore((state) => state.theme);
|
|
const [open, setOpen] = useState(false);
|
|
const selectedBot = bots.find((bot) => bot.id === selectedBotId) || bots[0];
|
|
const shortName = String(selectedBot?.name || selectedBot?.id || '').slice(0, 1).toUpperCase() || 'B';
|
|
const tone = normalizeAssignedBotTone(selectedBot?.enabled, selectedBot?.docker_status);
|
|
const canRenderPortal = typeof document !== 'undefined';
|
|
|
|
useEffect(() => {
|
|
if (bots.length <= 1) setOpen(false);
|
|
}, [bots.length]);
|
|
|
|
return (
|
|
<div className={`bot-switcher-wrap ${className || ''}`}>
|
|
<button
|
|
type="button"
|
|
className={`bot-switcher-trigger ${tone}${open ? ' is-open' : ''}`}
|
|
onClick={() => {
|
|
if (bots.length > 1) {
|
|
setOpen((value) => !value);
|
|
}
|
|
}}
|
|
title={selectedBot?.name || selectedBot?.id || (isZh ? '当前 Bot' : 'Current Bot')}
|
|
aria-label={selectedBot?.name || selectedBot?.id || (isZh ? '当前 Bot' : 'Current Bot')}
|
|
>
|
|
<span className="bot-switcher-trigger-avatar">{shortName}</span>
|
|
</button>
|
|
{open && canRenderPortal ? createPortal(
|
|
<div className="app-shell bot-switcher-portal-shell" data-theme={theme}>
|
|
<div className="bot-switcher-overlay" onClick={() => setOpen(false)}>
|
|
<div className="bot-switcher-popover" onClick={(event) => event.stopPropagation()}>
|
|
<div className="bot-switcher-popover-head">
|
|
<strong>{isZh ? '切换 Bot' : 'Switch Bot'}</strong>
|
|
<span>{isZh ? `${bots.length} 个` : `${bots.length}`}</span>
|
|
</div>
|
|
<div className="bot-switcher-popover-list">
|
|
{bots.map((bot) => {
|
|
const active = bot.id === selectedBot?.id;
|
|
const itemTone = normalizeAssignedBotTone(bot.enabled, bot.docker_status);
|
|
return (
|
|
<button
|
|
key={bot.id}
|
|
type="button"
|
|
className={`bot-switcher-item ${itemTone}${active ? ' is-active' : ''}`}
|
|
onClick={() => {
|
|
onSelectBot(bot.id);
|
|
setOpen(false);
|
|
}}
|
|
>
|
|
<div className="bot-switcher-item-main">
|
|
<span className="bot-switcher-item-avatar">{String(bot.name || bot.id || '').slice(0, 1).toUpperCase() || 'B'}</span>
|
|
<div className="bot-switcher-item-copy">
|
|
<strong>{bot.name || bot.id}</strong>
|
|
<span className="mono">{bot.id}</span>
|
|
</div>
|
|
</div>
|
|
<div className="bot-switcher-item-meta">
|
|
<span className={`badge ${itemTone === 'is-running' ? 'badge-ok' : itemTone === 'is-disabled' ? 'badge-err' : 'badge-unknown'}`}>
|
|
{itemTone === 'is-running' ? (isZh ? '运行中' : 'Running') : itemTone === 'is-disabled' ? (isZh ? '已停用' : 'Disabled') : (isZh ? '已停止' : 'Stopped')}
|
|
</span>
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
document.body,
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|