> ## Documentation Index
> Fetch the complete documentation index at: https://docs.li.fi/llms.txt
> Use this file to discover all available pages before exploring further.

# Op 目录

> 在 compose manifest 中注册的每一个 op，实时渲染。

export const ComposeOps = () => {
  const DEDICATED_OPS = new Set(['lifi.swap', 'lifi.zap', 'core.call']);
  const slugify = s => String(s).replace(/\./g, '-').replace(/([a-z0-9])([A-Z])/g, '$1-$2').replace(/_/g, '-').toLowerCase();
  const [state, setState] = useState({
    data: null,
    error: null
  });
  const [filter, setFilter] = useState('');
  useEffect(() => {
    let cancelled = false;
    setState({
      data: null,
      error: null
    });
    const run = async () => {
      try {
        const response = await fetch('https://composer.li.quest/compose/manifest');
        if (!response.ok) throw new Error(`HTTP ${response.status} ${response.statusText}`);
        const body = await response.json();
        if (!body || body.success !== true) {
          throw new Error(body?.error?.message ?? 'Unexpected response shape');
        }
        if (!cancelled) setState({
          data: body.data,
          error: null
        });
      } catch (err) {
        if (!cancelled) setState({
          data: null,
          error: err.message ?? String(err)
        });
      }
    };
    run();
    return () => {
      cancelled = true;
    };
  }, []);
  const renderBody = () => {
    if (state.error) {
      return <div style={{
        padding: '0.75rem 1rem',
        border: '1px solid #f5c6cb',
        background: '#f8d7da',
        color: '#721c24',
        borderRadius: '6px'
      }}>
        <strong>Failed to load ops.</strong>
        <div style={{
        fontFamily: 'monospace',
        marginTop: '0.25rem',
        fontSize: '0.9em'
      }}>{state.error}</div>
      </div>;
    }
    if (!state.data) return <div>Loading ops…</div>;
    const manifest = state.data;
    const ops = [...manifest.operations ?? []].sort((a, b) => a.id.localeCompare(b.id));
    const needle = filter.trim().toLowerCase();
    const visible = needle ? ops.filter(op => [op.id, op.description ?? ''].some(field => field.toLowerCase().includes(needle))) : ops;
    return <>
      <div style={{
      marginBottom: '0.5rem'
    }}>
        <input type="text" value={filter} onChange={e => setFilter(e.target.value)} placeholder="Filter by op id or description…" style={{
      width: '100%',
      padding: '0.5rem 0.75rem',
      border: '1px solid #ccc',
      borderRadius: '6px',
      fontSize: '0.95em'
    }} />
        <div style={{
      marginTop: '0.25rem',
      fontSize: '0.85em',
      opacity: 0.7
    }}>
          Showing <code>{visible.length}</code> of <code>{ops.length}</code> ops · manifest version <code>{manifest.manifestVersion}</code>
        </div>
      </div>
      <table>
        <thead>
          <tr>
            <th className="text-left"><strong>Op</strong></th>
            <th className="text-left"><strong>Description</strong></th>
            <th className="text-left"><strong>Inputs</strong></th>
            <th className="text-left"><strong>Outputs</strong></th>
          </tr>
        </thead>
        <tbody>
          {visible.map(op => <tr key={op.id}>
              <td>
                {DEDICATED_OPS.has(op.id) ? <a href={`/composer/composer-api/ops/${slugify(op.id)}`}><code>{op.id}</code></a> : <code>{op.id}</code>}
              </td>
              <td>{op.description ?? ''}</td>
              <td>{op.inputs?.length ?? 0}</td>
              <td>{op.outputs?.length ?? 0}</td>
            </tr>)}
        </tbody>
      </table>
    </>;
  };
  return renderBody();
};

Op 是你在 `Flow` 内部调用的具名原语操作。每个 op 都声明其输入和输出端口（port）、一个 config JSON Schema，以及一段人类可读的描述。下方表格根据 compose manifest 实时渲染，因此它始终精确反映当前受支持的内容。

本目录是每一个受支持 op 的**完整、权威列表** —— 比那少数几个拥有专属页面的 op 要多得多。少数几个最常用的 op 拥有专属参考页面，配有可运行的示例和文字说明：[`lifi.swap`](/composer/composer-api/ops/lifi-swap)、[`lifi.zap`](/composer/composer-api/ops/lifi-zap) 和 [`core.call`](/composer/composer-api/ops/core-call)。这些页面深入讲解单个 op —— 它们并非完整集合。其他所有 op 都连同其签名列在下方表格中；如需类型级别的细节，请在 `@lifi/composer-sdk` 上使用 IDE 自动补全。

有关如何将 op 连接进 flow，请参见 [Build a Flow](/composer/composer-api/guides/build-a-flow#chain-ops-in-your-flow)。

<ComposeOps />