Function Variable

src/components/Variable.jsx:19–659

({
  id,
  index,
  config,
  currentVal,
  inlineDefault = null,        // 当前位置的内联值（来自 {{A: val}} 语法）
  temporaryInlineVals = [],    // 本模版下该变量所有临时词条（不在词库中），跨位置收集
  isOpen,
  onToggle,
  onSelect,
  onAddCustom,
  popoverRef,
  categories,
  t,
  language,
  isDarkMode,
  groupId = null,  // 新增：分组ID，用于显示分组标识
  // AI 相关 props（预留接口）
  onGenerateAITerms = null,  // AI 生成词条的回调函数
  templateContext = "", // 新增：模版全文内容
})

} from '../constants/aiConfig';

export const Variable = ({
  id,
  index,
  config,
  currentVal,
  inlineDefault = null,        // 当前位置的内联值（来自 {{A: val}} 语法）
  temporaryInlineVals = [],    // 本模版下该变量所有临时词条（不在词库中），跨位置收集
  isOpen,
  onToggle,
  onSelect,
  onAddCustom,
  popoverRef,
  categories,
  t,
  language,
  isDarkMode,
  groupId = null,  // 新增：分组ID，用于显示分组标识
  // AI 相关 props（预留接口）
  onGenerateAITerms = null,  // AI 生成词条的回调函数
  templateContext = "", // 新增：模版全文内容
}) => {
  const [isAdding, setIsAdding] = useState(false);
  const [newOptionPrimary, setNewOptionPrimary] = useState("");
  const [newOptionSecondary, setNewOptionSecondary] = useState("");
  const [isHovered, setIsHovered] = useState(false);
  const [alignRight, setAlignRight] = useState(false);
  const [alignTop, setAlignTop] = useState(false);
  const [maxPopoverWidth, setMaxPopoverWidth] = useState('95vw');
  const [popoverPos, setPopoverPos] = useState(null);
  
  // 核心优化：改用即时检测，确保渲染初期定位逻辑正确
  // 增加阈值到 1024px，确保在平板和窄屏下也能触发居中模态框模式
  const [isMobileDevice, setIsMobileDevice] = useState(typeof window !== 'undefined' && window.innerWidth < 1024);
  const containerRef = useRef(null);

  // 初始化移动端检测
  useEffect(() => {
    const checkMobile = () => setIsMobileDevice(window.innerWidth < 1024);
    checkMobile();
    window.addEventListener('resize', checkMobile);
    return () => window.removeEventListener('resize', checkMobile);
  }, []);

  // AI 相关状态
  const [aiTerms, setAiTerms] = useState([]);  // AI 生成的词条
  const [isAILoading, setIsAILoading] = useState(false);  // AI 加载状态
  const [aiError, setAiError] = useState(null);  // AI 错误信息
  const [visibleAiTermsCount, setVisibleAiTermsCount] = useState(0); // 新增：可见的 AI 词条数量，用于逐个显示效果
  const [hasGeneratedOnce, setHasGeneratedOnce] = useState(false); // 新增：是否已经生成过词条

  //文字渐变色
  const TEXT_GRADIENT = 'linear-gradient(90deg, #F77F56 0%, rgba(255, 71, 20, 0.97) 100%)';

  // Determine styles based on category
  const categoryId = config?.category || 'other';
  const colorKey = categories[categoryId]?.color || 'slate';
  const style = CATEGORY_STYLES[colorKey] || CATEGORY_STYLES.slate;
  const premium = PREMIUM_STYLES[colorKey] || PREMIUM_STYLES.slate;