50 lines
1.4 KiB
JavaScript
50 lines
1.4 KiB
JavaScript
import React, { useEffect, useRef, useState } from 'react'
|
||
|
||
export default function CollapsibleUserGuide({ text, maxHeight = 160 }) {
|
||
const [expanded, setExpanded] = useState(false)
|
||
const [collapsible, setCollapsible] = useState(false)
|
||
const bodyRef = useRef(null)
|
||
|
||
useEffect(() => {
|
||
try {
|
||
const el = bodyRef.current
|
||
if (!el) return
|
||
// 渲染完成后判断是否需要折叠（内容高度超过 maxHeight）
|
||
const h = el.scrollHeight || 0
|
||
setCollapsible(h > Number(maxHeight) + 8)
|
||
} catch (e) {
|
||
// ignore
|
||
}
|
||
}, [text, maxHeight])
|
||
|
||
if (!text) return null
|
||
|
||
const effectiveMaxHeight = Math.max(60, Number(maxHeight) || 160)
|
||
const showToggle = collapsible
|
||
const isCollapsed = showToggle && !expanded
|
||
|
||
return (
|
||
<div className="collapsible-user-guide">
|
||
<div
|
||
ref={bodyRef}
|
||
className={`cug-body ${isCollapsed ? 'collapsed' : 'expanded'}`}
|
||
style={isCollapsed ? { maxHeight: `${effectiveMaxHeight}px` } : undefined}
|
||
>
|
||
<pre className="user-guide-content">{text}</pre>
|
||
{isCollapsed && <div className="cug-fade" />}
|
||
</div>
|
||
{showToggle && (
|
||
<button
|
||
type="button"
|
||
className="cug-toggle"
|
||
onClick={() => setExpanded((v) => !v)}
|
||
aria-expanded={expanded}
|
||
>
|
||
{expanded ? '收起' : '展开'}
|
||
</button>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|