# PopupAction 组件使用示例

以下为片段，实际页面请自行布局。

---

## 基础用法(长按)

```tsx
import { PopupAction } from '@alipay/agentic-design-mobile';

const actions = [
  { icon: 'ThumbsUp' as const, text: '点赞', onClick: () => console.log('点赞') },
  { icon: 'Copy' as const, text: '复制', onClick: () => console.log('复制') },
  { icon: 'Trash2' as const, text: '删除', onClick: () => console.log('删除') },
];

export function PopupActionBasic() {
  return (
    <PopupAction actions={actions}>
      <div style={{ background: 'rgba(0, 121, 255, 0.12)', padding: '12px 24px', borderRadius: 12 }}>
        长按此区域弹出操作菜单
      </div>
    </PopupAction>
  );
}
```

---

## 固定在顶部

```tsx
import { PopupAction } from '@alipay/agentic-design-mobile';

const base = [
  { icon: 'ThumbsUp' as const, text: '点赞', onClick: () => {} },
  { icon: 'ThumbsDown' as const, text: '踩一下', onClick: () => {} },
  { icon: 'Copy' as const, text: '复制', onClick: () => {} },
  { icon: 'Trash2' as const, text: '删除', onClick: () => {} },
];

export function PopupActionPinned() {
  const actions = base.map((action, index) => ({
    ...action,
    pinned: index < 2,
  }));
  return (
    <PopupAction actions={actions}>
      <div style={{ background: 'rgba(0, 121, 255, 0.12)', padding: '12px 24px', borderRadius: 12 }}>
        前两项固定在顶部
      </div>
    </PopupAction>
  );
}
```