// 共享组件库
// 导航栏、印章、分隔符、卡片等通用组件
const { useState, useEffect } = React;
// ====== 主题管理（全局共享） ======
// 三态：light / dark / auto
const ThemeManager = {
key: 'theme-mode',
order: ['light', 'dark', 'auto'],
getMode() {
try { return localStorage.getItem(this.key) || 'auto'; } catch(e) { return 'auto'; }
},
setMode(mode) {
const root = document.documentElement;
root.classList.add('theme-transitioning');
setTimeout(() => root.classList.remove('theme-transitioning'), 400);
root.setAttribute('data-theme', mode);
if (mode === 'auto') {
try { localStorage.removeItem(this.key); } catch(e) {}
} else {
try { localStorage.setItem(this.key, mode); } catch(e) {}
}
},
cycle() {
const current = this.getMode();
const idx = this.order.indexOf(current);
const next = this.order[(idx + 1) % this.order.length];
this.setMode(next);
return next;
},
isDark() {
const mode = this.getMode();
if (mode === 'dark') return true;
if (mode === 'light') return false;
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}
};
// ====== 主题图标 ======
function ThemeIcon({ mode }) {
if (mode === 'dark') {
// 月（深色模式）
return (
);
}
if (mode === 'light') {
// 日（浅色模式）
return (
);
}
// auto：半阴半阳（跟随系统）
return (
);
}
function themeLabel(mode) {
if (mode === 'light') return '浅色';
if (mode === 'dark') return '深色';
return '自动';
}
function themeLabelFull(mode) {
if (mode === 'light') return '浅色模式';
if (mode === 'dark') return '深色模式';
return '跟随系统';
}
// ====== 主题切换 hook ======
function useTheme() {
const [mode, setModeState] = useState(ThemeManager.getMode());
const [dark, setDark] = useState(ThemeManager.isDark());
useEffect(() => {
const syncFromDOM = () => {
setModeState(ThemeManager.getMode());
setDark(ThemeManager.isDark());
};
// 监听 localStorage 变化（多标签同步）
const onStorage = (e) => {
if (e.key === ThemeManager.key) syncFromDOM();
};
window.addEventListener('storage', onStorage);
// 监听系统主题变化（auto 模式下）
const mql = window.matchMedia('(prefers-color-scheme: dark)');
const onMedia = () => {
if (ThemeManager.getMode() === 'auto') setDark(mql.matches);
};
if (mql.addEventListener) mql.addEventListener('change', onMedia);
else if (mql.addListener) mql.addListener(onMedia);
// 轮询 data-theme 属性（兜底：当被外部脚本切换时也能同步）
let lastTheme = document.documentElement.getAttribute('data-theme');
const timer = setInterval(() => {
const cur = document.documentElement.getAttribute('data-theme');
if (cur !== lastTheme) {
lastTheme = cur;
syncFromDOM();
}
}, 500);
return () => {
window.removeEventListener('storage', onStorage);
if (mql.removeEventListener) mql.removeEventListener('change', onMedia);
else if (mql.removeListener) mql.removeListener(onMedia);
clearInterval(timer);
};
}, []);
const cycle = () => {
ThemeManager.cycle();
setModeState(ThemeManager.getMode());
setDark(ThemeManager.isDark());
};
return { mode, dark, cycle, setMode: (m) => { ThemeManager.setMode(m); setModeState(m); setDark(ThemeManager.isDark()); } };
}
// ====== 主题切换按钮（桌面端：胶囊形图标+文字） ======
function ThemeToggle({ className = "" }) {
const { mode, cycle } = useTheme();
return (
);
}
// ====== 主题切换（移动端：横条按钮） ======
function MobileThemeToggle() {
const { mode, cycle } = useTheme();
return (
主题模式
);
}
// ====== 祥云 SVG 图标 ======
function CloudIcon({ className = "", size = 24 }) {
return (
);
}
// ====== 印章组件 ======
function SealStamp({ text, size = "md", className = "", animate = false }) {
const sizeClass = size === "sm" ? "small" : size === "lg" ? "large" : "";
return (
{text}
);
}
// ====== 祥云分隔符 ======
function CloudDivider() {
return (
);
}
// ====== 导航栏 ======
function NavBar({ currentPage, onNavigate }) {
const [toolsOpen, setToolsOpen] = useState(false);
const [mobileOpen, setMobileOpen] = useState(false);
const toolsRef = React.useRef(null);
const handleNav = (path) => {
onNavigate(path);
setToolsOpen(false);
setMobileOpen(false);
};
// 点击下拉外部关闭
useEffect(() => {
function handleClickOutside(e) {
if (toolsRef.current && !toolsRef.current.contains(e.target)) {
setToolsOpen(false);
}
}
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);
const navItems = teamData.nav.filter(item => item.label !== "交互工具");
const toolItem = teamData.nav.find(item => item.label === "交互工具");
return (
);
}
// ====== 章节标题 ======
function SectionHead({ eyebrow, title, subtitle, children }) {
return (
{eyebrow &&
{eyebrow}
}
{title &&
{title}
}
{subtitle &&
{subtitle}
}
{children}
{corner &&
{corner}
}
{kicker &&
{kicker}
}
{title &&
{title}
}
{desc &&
{desc}
}
{children}
{leftVertical}
)}
{rightVertical && (
{rightVertical}
)}
{title}
{sealText && {sealText}}
{subtitle &&
{subtitle}
}
{quote &&
{quote}
}
{children}
);
}
// ====== 竹简时间线 ======
function BambooTimeline({ items }) {
return (
{items.map((item, idx) => (
{item.year}
{item.yearAD}
{item.title}
{item.date &&
{item.date}
}
{item.desc}
))}
{children}
);
}
// ====== 页脚 ======
function Footer() {
return (
);
}
// ====== 工具页头部 ======
function ToolHeader({ title, subtitle, icon }) {
return (
{icon}
{title}
{subtitle}
);
}
// ====== 返回按钮 ======
function BackButton({ onNavigate }) {
return (
);
}
// 导出到全局
Object.assign(window, {
CloudIcon,
SealStamp,
CloudDivider,
NavBar,
SectionHead,
GuCard,
HeroSection,
BambooTimeline,
ScrollContainer,
Footer,
ToolHeader,
BackButton
});