126 lines
4.9 KiB
TypeScript
126 lines
4.9 KiB
TypeScript
import { useState, useEffect, useMemo, type ComponentType } from 'react';
|
||
import { useAuth } from '../auth/useAuth';
|
||
import { DemoModeProvider } from './Blur';
|
||
import FeedbackFab from './FeedbackFab';
|
||
|
||
export interface ModuleConfig {
|
||
id: string;
|
||
label: string;
|
||
icon: ComponentType<{ size?: number; className?: string }>;
|
||
component: ComponentType;
|
||
}
|
||
|
||
/** hash 一级段（`#<id>` 或 `#<id>/<sub>` 都只取 id） */
|
||
function getHashHead(): string {
|
||
return window.location.hash.slice(1).split('/')[0];
|
||
}
|
||
|
||
function getInitialModule(modules: ModuleConfig[]): string {
|
||
const head = getHashHead();
|
||
if (modules.some((m) => m.id === head)) return head;
|
||
return modules[0]?.id ?? '';
|
||
}
|
||
|
||
function getHashModule(modules: ModuleConfig[]): string {
|
||
const head = getHashHead();
|
||
return modules.some((m) => m.id === head) ? head : '';
|
||
}
|
||
|
||
export function Shell({ modules }: { modules: ModuleConfig[] }) {
|
||
const [activeModule, setActiveModule] = useState(() => getInitialModule(modules));
|
||
|
||
useEffect(() => {
|
||
const onHashChange = () => {
|
||
const h = getHashModule(modules);
|
||
if (h) setActiveModule(h);
|
||
};
|
||
window.addEventListener('hashchange', onHashChange);
|
||
return () => window.removeEventListener('hashchange', onHashChange);
|
||
}, [modules]);
|
||
|
||
useEffect(() => {
|
||
// 同步 hash 一段到当前模块：使用 replaceState 避免产生多余的 history 记录，
|
||
// 否则在小程序/webview 环境下首次进入需要点两次返回才能退出。
|
||
// 注意只比对一级段，避免把子模块写入的 `#<id>/<sub>` 二级段抹掉。
|
||
if (getHashHead() !== activeModule) {
|
||
const { pathname, search } = window.location;
|
||
window.history.replaceState(null, '', `${pathname}${search}#${activeModule}`);
|
||
}
|
||
}, [activeModule]);
|
||
|
||
const switchModule = (id: string) => {
|
||
if (getHashHead() === id) return;
|
||
const { pathname, search } = window.location;
|
||
window.history.replaceState(null, '', `${pathname}${search}#${id}`);
|
||
setActiveModule(id);
|
||
};
|
||
|
||
const ActiveComponent = modules.find((m) => m.id === activeModule)?.component ?? modules[0]?.component;
|
||
|
||
const { user } = useAuth();
|
||
const watermarkText = useMemo(() => {
|
||
const name = user?.userName || '未登录';
|
||
const time = new Date().toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }).replace(/\//g, '-');
|
||
return `${name}-${time}`;
|
||
}, [user]);
|
||
|
||
return (
|
||
<DemoModeProvider enabled={false}>
|
||
<div className="flex min-h-screen">
|
||
{/* 全局水印 */}
|
||
<div className="fixed inset-0 pointer-events-none z-[9999] overflow-hidden" style={{ opacity: 0.06 }}>
|
||
<div className="absolute inset-0" style={{
|
||
backgroundImage: `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' width='320' height='200'><text x='50%' y='50%' text-anchor='middle' dominant-baseline='middle' font-size='14' font-family='sans-serif' fill='%23000' transform='rotate(-25 160 100)'>${watermarkText}</text></svg>`)}")`,
|
||
backgroundRepeat: 'repeat',
|
||
}} />
|
||
</div>
|
||
{/* Web 侧边栏 (md 及以上) */}
|
||
<nav className="hidden md:flex flex-col items-center w-16 bg-white border-r border-gray-100 fixed top-0 left-0 h-full z-50 py-6 gap-2">
|
||
{modules.map((m) => {
|
||
const Icon = m.icon;
|
||
const isActive = m.id === activeModule;
|
||
return (
|
||
<button
|
||
key={m.id}
|
||
onClick={() => switchModule(m.id)}
|
||
className={`flex flex-col items-center justify-center w-14 h-14 rounded-xl transition-colors ${
|
||
isActive
|
||
? 'bg-blue-50 text-blue-600'
|
||
: 'text-gray-400 hover:text-gray-600 hover:bg-gray-50'
|
||
}`}
|
||
>
|
||
<Icon size={22} />
|
||
<span className="text-[10px] mt-1 leading-tight">{m.label}</span>
|
||
</button>
|
||
);
|
||
})}
|
||
</nav>
|
||
|
||
{/* 内容区 */}
|
||
<main className="flex-1 md:ml-16 pb-16 md:pb-0 min-w-0" style={{ overflowX: 'clip' }}>
|
||
{ActiveComponent && <ActiveComponent />}
|
||
<FeedbackFab module={activeModule} />
|
||
</main>
|
||
|
||
{/* 移动端底部导航 (md 以下) */}
|
||
<nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 p-2 flex justify-around items-center md:hidden z-50">
|
||
{modules.map((m) => {
|
||
const Icon = m.icon;
|
||
const isActive = m.id === activeModule;
|
||
return (
|
||
<button
|
||
key={m.id}
|
||
onClick={() => switchModule(m.id)}
|
||
className={`flex flex-col items-center ${isActive ? 'text-blue-600' : 'text-gray-400'}`}
|
||
>
|
||
<Icon size={20} />
|
||
<span className="text-[10px] mt-1">{m.label}</span>
|
||
</button>
|
||
);
|
||
})}
|
||
</nav>
|
||
</div>
|
||
</DemoModeProvider>
|
||
);
|
||
}
|