// MedHub 共享组件 — Icons, Avatars, Mobile/Desktop Shells, common bits
const Icon = ({ name, size = 18, color = 'currentColor', strokeWidth = 1.7, className = '', style }) => {
const paths = ICONS[name] || ICONS.help;
return (
);
};
const ICONS = {
home: <>,
stethoscope: <>,
microscope: <>,
briefcase: <>,
user: <>,
bell: <>,
search: <>,
filter: <>,
plus: <>,
arrowRight: <>,
arrowLeft: <>,
chevronRight: <>,
chevronDown: <>,
chevronUp: <>,
close: <>,
check: <>,
more: <>,
send: <>,
paperclip: <>,
mic: <>,
image: <>,
warning: <>,
info: <>,
checkCircle: <>,
star: <>,
trophy: <>,
award: <>,
brain: <>,
flask: <>,
fileText: <>,
chart: <>,
radar: <>,
users: <>,
message: <>,
hash: <>,
flag: <>,
building: <>,
mapPin: <>,
calendar: <>,
bookmark: <>,
settings: <>,
edit: <>,
upload: <>,
share: <>,
thumbsUp: <>,
bot: <>,
sparkle: <>,
zap: <>,
tooth: <>,
play: <>,
refresh: <>,
lightbulb: <>,
clipboard: <>,
help: <>,
layers: <>,
database: <>,
trending: <>,
globe: <>,
eye: <>,
clock: <>,
bookOpen: <>,
shield: <>,
list: <>,
fingerprint: <>,
graduationCap: <>,
arrowUpRight: <>,
pulse: <>,
};
const Avatar = ({ name = '?', size = 32, color, style }) => {
const initials = name.slice(0, 1);
const palette = [
'linear-gradient(135deg, #87b6dc, #2f76b3)',
'linear-gradient(135deg, #79c8bd, #2ea597)',
'linear-gradient(135deg, #efbb6e, #d68a2b)',
'linear-gradient(135deg, #b9d5ec, #5494c8)',
'linear-gradient(135deg, #d2ede9, #79c8bd)',
];
const idx = (name.charCodeAt(0) || 0) % palette.length;
return (
{initials}
);
};
const Stars = ({ value = 3, max = 5 }) => (
{Array.from({ length: max }).map((_, i) => (
★
))}
);
const MobileShell = ({ children, statusBg = 'transparent', statusColor }) => (
);
const MobileTabBar = ({ active = 'home', onChange = () => {} }) => {
const tabs = [
{ id: 'home', label: '首页', icon: 'home' },
{ id: 'training', label: '临床训练', icon: 'stethoscope' },
{ id: 'research', label: '科研', icon: 'microscope' },
{ id: 'career', label: '就业', icon: 'briefcase' },
{ id: 'profile', label: '我的', icon: 'user' },
];
return (
{tabs.map(t => {
const isActive = active === t.id;
return (
);
})}
);
};
const MobileTopBar = ({ title, left, right, subtitle, transparent }) => (
{left}
{title}
{subtitle &&
{subtitle}
}
{right}
);
const DesktopShell = ({ active = 'home', onNav = () => {}, children, user }) => {
const navs = [
{ id: 'home', label: '首页', icon: 'home' },
{ type: 'group', label: '临床训练' },
{ id: 'training', label: '病例训练场', icon: 'stethoscope' },
{ id: 'lab', label: '实验室操作', icon: 'flask' },
{ type: 'group', label: '科研赋能' },
{ id: 'research', label: '师生对接', icon: 'users' },
{ id: 'community', label: '热点社区', icon: 'hash' },
{ id: 'competition', label: '竞赛助手', icon: 'trophy' },
{ type: 'group', label: '就业深造' },
{ id: 'career', label: '职业规划', icon: 'fingerprint' },
{ id: 'jobs', label: '招聘广场', icon: 'building' },
{ id: 'evaluation', label: '能力认证', icon: 'shield' },
{ type: 'group', label: '个人' },
{ id: 'profile', label: '个人中心', icon: 'user' },
];
return (
{children}
);
};
const DesktopTopBar = ({ title, breadcrumb, right }) => (
{breadcrumb &&
{breadcrumb}
}
{title}
{right}
);
const RadarChart = ({ values = [80, 65, 72, 88, 70, 75], labels = ['临床思维', '操作技能', '科研能力', '基础理论', '医患沟通', '循证素养'], size = 240, max = 100, color = 'var(--blue-500)' }) => {
const cx = size / 2, cy = size / 2;
const radius = size * 0.35;
const sides = values.length;
const angle = (i) => (Math.PI * 2 * i) / sides - Math.PI / 2;
const point = (i, v) => {
const r = (v / max) * radius;
return [cx + r * Math.cos(angle(i)), cy + r * Math.sin(angle(i))];
};
const polyPoints = values.map((v, i) => point(i, v).join(',')).join(' ');
const rings = [0.25, 0.5, 0.75, 1];
return (
);
};
const ImagePlaceholder = ({ width = '100%', height = 120, label = '影像', tone = 'blue', icon = 'image' }) => {
const tones = {
blue: { bg: 'var(--blue-50)', stripe: 'var(--blue-100)', text: 'var(--blue-700)' },
teal: { bg: 'var(--teal-50)', stripe: 'var(--teal-100)', text: 'var(--teal-700)' },
amber: { bg: 'var(--amber-50)', stripe: 'var(--amber-100)', text: 'var(--amber-700)' },
ink: { bg: 'var(--ink-100)', stripe: 'var(--ink-150)', text: 'var(--ink-600)' },
dark: { bg: '#0f1722', stripe: '#1c2735', text: '#94a0ad' },
};
const t = tones[tone];
return (
{label}
);
};
const AgentDot = ({ status = 'idle' }) => {
const colors = {
active: 'var(--teal-500)', pending: 'var(--amber-500)',
done: 'var(--teal-500)', idle: 'var(--ink-300)', error: 'var(--red-500)',
};
return (
);
};
if (typeof document !== 'undefined' && !document.getElementById('mh-anims')) {
const s = document.createElement('style');
s.id = 'mh-anims';
s.textContent = `
@keyframes mhPulse { 0%,100%{opacity:1} 50%{opacity:0.45} }
@keyframes mhFadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
.mh-fade-in { animation: mhFadeIn 0.3s ease-out; }
`;
document.head.appendChild(s);
}
const SectionTitle = ({ children, action }) => (
{children}
{action}
);
// AI 小精灵：极简抽象图标
const AIPixie = ({ size = 32, state = 'idle', onClick, style }) => {
// 抽象：圆角方形+脑波弧，stroke based
return (
);
};
Object.assign(window, {
Icon, ICONS, Avatar, Stars,
MobileShell, MobileTabBar, MobileTopBar,
DesktopShell, DesktopTopBar,
RadarChart, ImagePlaceholder, AgentDot, SectionTitle, AIPixie,
});