/* global React */
// Atomic components + icons.
// ─── Icons (Lucide-style 1.5px stroke, inline) ──────────────────────
function Ic({ d, size = 16, fill, className, style }) {
return (
);
}
const I = {
search: (p) => ,
bell: (p) => ,
home: (p) => ,
inbox: (p) => ,
database: (p) => ,
book: (p) => ,
refresh: (p) => ,
grid: (p) => ,
message: (p) => ,
activity: (p) => ,
list: (p) => ,
settings: (p) => ,
check: (p) => ,
x: (p) => ,
plus: (p) => ,
chevR: (p) => ,
chevD: (p) => ,
chevL: (p) => ,
eye: (p) => ,
edit: (p) => ,
trash: (p) => ,
upload: (p) => ,
download: (p) => ,
filter: (p) => ,
alert: (p) => ,
info: (p) => ,
play: (p) => ,
pause: (p) => ,
clock: (p) => ,
layers: (p) => ,
shield: (p) => ,
cmd: (p) => ,
bookOpen: (p) => ,
cloud: (p) => ,
user: (p) => ,
arrowR: (p) => ,
panel: (p) => ,
};
// ─── Logo / Brand mark ─────────────────────────────────────────────
function Logo({ size = 28 }) {
// Stylized Pokéball half-mark, kept simple
return (
);
}
// ─── TypeChip ──────────────────────────────────────────────────────
function TypeChip({ type }) {
const color = (window.MOCK.TYPE_COLORS)[type] || 'var(--text-3)';
return {type};
}
// ─── Sprite ────────────────────────────────────────────────────────
function Sprite({ name, color = '#ddd', size = 'md', missing = false, label }) {
const cls = `sprite ${size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : ''} ${missing ? 'missing' : ''}`;
if (missing) {
return (
);
}
// Generate a pixelated "monster" silhouette deterministically from name
const seed = (name || '').split('').reduce((a, c) => a + c.charCodeAt(0), 0);
const cells = [];
for (let y = 0; y < 8; y++) {
for (let x = 0; x < 8; x++) {
const v = ((seed * 9301 + (y * 8 + x) * 49297) % 233280) / 233280;
// Symmetrize horizontally
const mx = x < 4 ? x : 7 - x;
const vv = ((seed * 9301 + (y * 8 + mx) * 49297) % 233280) / 233280;
// Bias: top-rows lower fill, middle higher
const bias = y < 1 || y > 6 ? .3 : .65;
if (vv < bias) cells.push([x, y]);
}
}
return (
);
}
function hexAlpha(hex, a) {
// Accept #RRGGBB
const h = hex.replace('#','');
const r = parseInt(h.substring(0,2),16);
const g = parseInt(h.substring(2,4),16);
const b = parseInt(h.substring(4,6),16);
return `rgba(${r},${g},${b},${a})`;
}
// ─── Pill / Badge / Button shortcuts ───────────────────────────────
function Pill({ status, children }) {
const labels = { pending: '待审', approved: '已通过', rejected: '已驳回', merged: '已合并', new: '新' };
return {children || labels[status]};
}
function Btn({ children, kind = '', size = '', icon, onClick, disabled, title, type='button' }) {
return (
);
}
function KBD({ children }) { return {children}; }
// ─── Toast ─────────────────────────────────────────────────────────
function useToast() {
const [items, setItems] = React.useState([]);
const push = React.useCallback((msg, kind = 'ok') => {
const id = Math.random().toString(36).slice(2);
setItems((s) => [...s, { id, msg, kind }]);
setTimeout(() => setItems((s) => s.filter((x) => x.id !== id)), 2600);
}, []);
const node = (
{items.map((t) => (
{t.kind === 'ok' ? : t.kind === 'err' ? : }
{t.msg}
))}
{title}
{hint &&
{hint}
}
{action &&
{action}
}
);
}
// ─── Confirm dialog ────────────────────────────────────────────────
function ConfirmDialog({ open, title, body, confirmText='确认', danger, onConfirm, onCancel }) {
if (!open) return null;
return (
e.stopPropagation()} className="card" style={{ width:420, animation:'pop .14s ease' }}>
取消
{confirmText}
);
}
// ─── Roles / Permissions ───────────────────────────────────────────
const ROLES = {
'super-admin': { label: '主管理员', color: '#6366F1', short: '主' },
'editor': { label: '编辑', color: '#10B981', short: '编' },
'reviewer': { label: '审核员', color: '#F59E0B', short: '审' },
};
// What each role can DO on each module.
// 'r' = read, 'w' = write, '' = locked
const PERMS = {
'super-admin': { dashboard:'w', submissions:'w', data:'w', wiki:'w', scrape:'w', pokedex:'w', feedback:'w', status:'w', audit:'w', settings:'w' },
'editor': { dashboard:'r', submissions:'w', data:'w', wiki:'w', scrape:'r', pokedex:'w', feedback:'w', status:'r', audit:'r', settings:'r' },
'reviewer': { dashboard:'r', submissions:'w', data:'', wiki:'r', scrape:'', pokedex:'r', feedback:'r', status:'', audit:'r', settings:'r' },
};
function can(role, mod, op = 'r') {
const p = PERMS[role]?.[mod];
if (!p) return false;
if (op === 'r') return p === 'r' || p === 'w';
if (op === 'w') return p === 'w';
return false;
}
function RolePill({ role }) {
const r = ROLES[role] || ROLES['super-admin'];
return (
{r.label}
);
}
function RoleDot({ role, size = 8 }) {
const r = ROLES[role] || ROLES['super-admin'];
return ;
}
// Export to global scope
Object.assign(window, {
I, Logo, TypeChip, Sprite, Pill, Btn, KBD, useToast, Empty, ConfirmDialog, hexAlpha,
ROLES, PERMS, can, RolePill, RoleDot,
});