Function GlossaryPanel

src/Components/FAQ/FAQ.jsx:190–255

()

}

function GlossaryPanel() {
    const [query, setQuery] = useState("");
    const q = query.trim().toLowerCase();
    const sections = useMemo(() => glossarySections
        .map((section) => ({
            title: section.title,
            terms: section.terms
                .map(splitTerm)
                .filter(({term, def}) => !q || term.toLowerCase().includes(q) || def.toLowerCase().includes(q)),
        }))
        .filter((section) => section.terms.length > 0), [q]);

    return (
        <Box>
            <TextField
                size="small"
                placeholder="搜索缩写或释义…"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                sx={{mb: 3, width: '100%', maxWidth: 360}}
                InputProps={{startAdornment: <InputAdornment position="start"><SearchRounded fontSize="small"/></InputAdornment>}}
            />
            {sections.length === 0 && <Typography color="text.secondary">未找到匹配的词条</Typography>}
            {sections.map((section) => (
                <Box key={section.title} sx={{mb: 3.5}}>
                    <Typography sx={{fontWeight: 600, color: 'text.secondary', fontSize: 13, letterSpacing: '0.04em', mb: 1}}>
                        {section.title}
                    </Typography>
                    <Box sx={{display: 'grid', gridTemplateColumns: {xs: '1fr', md: '1fr 1fr'}, columnGap: 4, rowGap: 0}}>
                        {section.terms.map(({term, def}) => (
                            <Box
                                key={term}
                                sx={{
                                    display: 'flex',
                                    gap: 1.5,
                                    alignItems: 'baseline',
                                    py: 1,
                                    borderBottom: '1px solid',
                                    borderColor: 'divider',
                                }}
                            >
                                <Typography
                                    component="span"
                                    sx={{
                                        color: 'primary.main',
                                        fontWeight: 600,
                                        fontFamily: '"SF Mono", ui-monospace, Menlo, monospace',
                                        fontSize: 13,
                                        whiteSpace: 'nowrap',
                                        flexShrink: 0,
                                        minWidth: 56,
                                    }}
                                >
                                    {term}
                                </Typography>
                                <Typography component="span" variant="body2" sx={{color: 'text.secondary'}}>
                                    {def}
                                </Typography>