a

frontend/src/components/CollapsibleUserGuide.jsx

@@ -0,0 +1,49 @@
+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>
+  )
+}
+