refactor: 优化脚本说明展示与变量分区

- 将脚本说明从主函数区域迁移到工具栏，点击问号按钮切换显示
- 变量区域拆分为"函数入参"和"绑定参数"两个独立分区
- SectionHeader 支持 extra 插槽用于扩展操作
- 简化 MainFunctionSection，移除冗余的 tooltip 逻辑

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: xlorne

apps/app-pc/src/pages/home.tsx

@@ -36,7 +36,18 @@ const HomePage = () => {
           console.log('Code changed:', value);
         }}
         options={{ minHeight: 400, maxHeight: 500 }}
-        toolbarExtra={<div style={{ marginLeft: 16, color: '#888' }}>这是额外的工具栏内容</div>}
+        toolbar={[
+          {
+            label: '自定义按钮',
+            title: '这是一个自定义工具栏按钮',
+            backgroundColor: '#007bff',
+            hoverBackgroundColor: '#0056b3',
+            textColor: '#fff',
+            borderColor: '#007bff',
+            onClick: () => message.info('点击了自定义按钮'),
+          },
+        ]}
+        toolbarExtra={<div style={{ marginLeft: 16, color: '#888' }}>这是自定义的额外的工具栏内容</div>}
       />
     </div>
   );

packages/script-engine/src/components/main-function-section.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback, useEffect } from 'react';
+import React from 'react';
 import type { ScriptMetadata } from '../types';
 import type { ThemeColors } from './theme-colors';
 import { SectionHeader } from './section-header';
@@ -8,73 +8,7 @@ export interface MainFunctionSectionProps {
   colors: ThemeColors;
 }
 
-// ── Tooltip 定位：基于 fixed 坐标，避免被滚动容器裁剪 ──────────
-
-interface TooltipPos {
-  top: number;
-  left: number;
-  maxWidth: number;
-  maxHeight: number;
-}
-
-const TOOLTIP_MARGIN = 6;
-const TOOLTIP_MAX_WIDTH = 380;
-
-function calcTooltipPos(
-  anchorRect: DOMRect,
-  tooltipEl: HTMLDivElement | null,
-): TooltipPos {
-  const vw = window.innerWidth;
-  const vh = window.innerHeight;
-
-  // 优先显示在 anchor 下方，空间不足时翻到上方
-  const tooltipH = tooltipEl?.scrollHeight ?? 200;
-  const spaceBelow = vh - anchorRect.bottom - TOOLTIP_MARGIN;
-  const spaceAbove = anchorRect.top - TOOLTIP_MARGIN;
-  const placeBelow = spaceBelow >= Math.min(tooltipH, 260) || spaceBelow >= spaceAbove;
-
-  const top = placeBelow
-    ? anchorRect.bottom + TOOLTIP_MARGIN
-    : Math.max(TOOLTIP_MARGIN, anchorRect.top - tooltipH - TOOLTIP_MARGIN);
-
-  // 水平方向：以 anchor 左边为起点，超出右边界则左移
-  let left = anchorRect.left;
-  const maxRight = vw - TOOLTIP_MARGIN;
-  if (left + TOOLTIP_MAX_WIDTH > maxRight) {
-    left = Math.max(TOOLTIP_MARGIN, maxRight - TOOLTIP_MAX_WIDTH);
-  }
-
-  const maxWidth = Math.min(TOOLTIP_MAX_WIDTH, maxRight - left);
-  const maxHeight = placeBelow ? spaceBelow - TOOLTIP_MARGIN : spaceAbove - TOOLTIP_MARGIN;
-
-  return { top, left, maxWidth, maxHeight: Math.max(maxHeight, 80) };
-}
-
-// ── 组件 ──────────────────────────────────────────────────────
-
 export const MainFunctionSection: React.FC<MainFunctionSectionProps> = ({ metadata, colors }) => {
-  const [showTip, setShowTip] = useState(false);
-  const [pos, setPos] = useState<TooltipPos | null>(null);
-  const anchorRef = useRef<HTMLSpanElement>(null);
-  const tooltipRef = useRef<HTMLDivElement>(null);
-
-  const updatePos = useCallback(() => {
-    if (!anchorRef.current) return;
-    const rect = anchorRef.current.getBoundingClientRect();
-    setPos(calcTooltipPos(rect, tooltipRef.current));
-  }, []);
-
-  useEffect(() => {
-    if (!showTip) return;
-    updatePos();
-    window.addEventListener('scroll', updatePos, true);
-    window.addEventListener('resize', updatePos);
-    return () => {
-      window.removeEventListener('scroll', updatePos, true);
-      window.removeEventListener('resize', updatePos);
-    };
-  }, [showTip, updatePos]);
-
   return (
     <div>
       <SectionHeader colors={colors} label="主函数" />
@@ -86,32 +20,6 @@ export const MainFunctionSection: React.FC<MainFunctionSectionProps> = ({ metada
           <span style={{ color: colors.text, fontWeight: 500 }}>
             {metadata.mainMethod}
           </span>
-          {metadata.description && (
-            <span
-              ref={anchorRef}
-              style={{ display: 'inline-flex', cursor: 'help', flexShrink: 0 }}
-              onMouseEnter={() => setShowTip(true)}
-              onMouseLeave={() => setShowTip(false)}
-            >
-              <span
-                style={{
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  width: 14,
-                  height: 14,
-                  borderRadius: '50%',
-                  border: `1px solid ${colors.textSecondary}`,
-                  color: colors.textSecondary,
-                  fontSize: 10,
-                  lineHeight: 1,
-                  fontWeight: 600,
-                }}
-              >
-                ?
-              </span>
-            </span>
-          )}
           <span style={{ color: colors.textSecondary, fontSize: 11 }}>
             ({metadata.requests.map((r) => `${r.name}: ${r.dataType}`).join(', ')})
           </span>
@@ -122,37 +30,6 @@ export const MainFunctionSection: React.FC<MainFunctionSectionProps> = ({ metada
           )}
         </div>
       </div>
-
-      {/* Tooltip 渲染在 fixed 层，脱离滚动容器 */}
-      {showTip && pos && metadata.description && (
-        <div
-          ref={tooltipRef}
-          onMouseEnter={() => setShowTip(true)}
-          onMouseLeave={() => setShowTip(false)}
-          style={{
-            position: 'fixed',
-            top: pos.top,
-            left: pos.left,
-            maxWidth: pos.maxWidth,
-            maxHeight: pos.maxHeight,
-            overflowY: 'auto',
-            padding: '8px 12px',
-            background: colors.headerBg,
-            border: `1px solid ${colors.border}`,
-            borderRadius: 6,
-            color: colors.text,
-            fontSize: 12,
-            lineHeight: 1.65,
-            whiteSpace: 'pre-wrap',
-            wordBreak: 'break-word',
-            zIndex: 9999,
-            boxShadow: '0 4px 16px rgba(0,0,0,0.3)',
-            pointerEvents: 'auto',
-          }}
-        >
-          {metadata.description}
-        </div>
-      )}
     </div>
   );
 };

packages/script-engine/src/components/section-header.tsx

@@ -4,11 +4,16 @@ import type { ThemeColors } from './theme-colors';
 export interface SectionHeaderProps {
   colors: ThemeColors;
   label: string;
+  /** 标题右侧的额外操作区域（如按钮、图标） */
+  extra?: React.ReactNode;
 }
 
-export const SectionHeader: React.FC<SectionHeaderProps> = ({ colors, label }) => (
+export const SectionHeader: React.FC<SectionHeaderProps> = ({ colors, label, extra }) => (
   <div
     style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
       padding: '6px 12px 4px',
       fontSize: 11,
       textTransform: 'uppercase',
@@ -17,6 +22,7 @@ export const SectionHeader: React.FC<SectionHeaderProps> = ({ colors, label }) =
       fontWeight: 600,
     }}
   >
-    {label}
+    <span>{label}</span>
+    {extra && <div style={{ display: 'flex', alignItems: 'center' }}>{extra}</div>}
   </div>
 );