# Action Panel

![](/files/vOD64DtH3Nq7PgFmXL9H)

## API 参考

### ActionPanel

公开用户可以执行的 [actions](/zh/api-can-kao/user-interface/actions.md) 列表。

通常，项目是上下文感知的，例如，基于所选的列表项目。Actions 带有语义部分，并且可以分配键盘快捷键。

第一和第二动作成为主要和次要动作。他们会自动分配默认的键盘快捷键。在 [List](/zh/api-can-kao/user-interface/list.md),、[Grid](/zh/api-can-kao/user-interface/grid.md) and [Detail](/zh/api-can-kao/user-interface/detail.md) 中，`↵` 表示主要操作，`⌘` `↵` 表示次要操作。在 Form 中，主要是 `⌘` `↵`，次要是 `⌘` `⇧` `↵`。请记住，虽然您可以为主要和次要操作指定其他快捷方式，但它不会显示在操作面板中。

#### 例子

```typescript
import { ActionPanel, Action, List } from "@raycast/api";

export default function Command() {
  return (
    <List navigationTitle="Open Pull Requests">
      <List.Item
        title="Docs: Update API Reference"
        subtitle="#1"
        actions={
          <ActionPanel title="#1 in raycast/extensions">
            <Action.OpenInBrowser url="https://github.com/raycast/extensions/pull/1" />
            <Action.CopyToClipboard
              title="Copy Pull Request URL"
              content="https://github.com/raycast/extensions/pull/1"
            />
          </ActionPanel>
        }
      />
    </List>
  );
}
```

#### 参数

<table><thead><tr><th width="131">名称</th><th>描述</th><th>类型</th><th>默认</th></tr></thead><tbody><tr><td>children</td><td>不管是 section 还是 action，如果指定了 Action 元素，则会自动创建默认部分。</td><td><a href="#actionpanel.children"><code>ActionPanel.Children</code></a></td><td>-</td></tr><tr><td>title</td><td>标题显示在面板顶部</td><td><code>string</code></td><td>-</td></tr></tbody></table>

### ActionPanel.Section

一组视觉上分开的项。

当 ActionPanel 包含大量操作时，请使用部分来帮助引导用户执行相关操作。例如，为所有复制操作创建一个 section。

#### 例子

```typescript
import { ActionPanel, Action, List } from "@raycast/api";

export default function Command() {
  return (
    <List navigationTitle="Open Pull Requests">
      <List.Item
        title="Docs: Update API Reference"
        subtitle="#1"
        actions={
          <ActionPanel title="#1 in raycast/extensions">
            <ActionPanel.Section title="Copy">
              <Action.CopyToClipboard title="Copy Pull Request Number" content="#1" />
              <Action.CopyToClipboard
                title="Copy Pull Request URL"
                content="https://github.com/raycast/extensions/pull/1"
              />
              <Action.CopyToClipboard title="Copy Pull Request Title" content="Docs: Update API Reference" />
            </ActionPanel.Section>
            <ActionPanel.Section title="Danger zone">
              <Action title="Close Pull Request" onAction={() => console.log("Close PR #1")} />
            </ActionPanel.Section>
          </ActionPanel>
        }
      />
    </List>
  );
}
```

#### 参数

<table><thead><tr><th width="134">名称</th><th>描述</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>children</td><td>section 里的元素。</td><td><a href="#actionpanel.section.children"><code>ActionPanel.Section.Children</code></a></td><td>-</td></tr><tr><td>title</td><td>标题显示在该部分上方</td><td><code>string</code></td><td>-</td></tr></tbody></table>

### ActionPanel.Submenu

一个非常具体的操作，在选择时将用其子级替换当前的 ActionPanel。

当操作需要从一系列选项中进行选择时，这非常方便。例如，向 GitHub 拉取请求添加标签或向待办事项添加受让人。

#### 例子

```typescript
import { Action, ActionPanel, Color, Icon, List } from "@raycast/api";

export default function Command() {
  return (
    <List navigationTitle="Open Pull Requests">
      <List.Item
        title="Docs: Update API Reference"
        subtitle="#1"
        actions={
          <ActionPanel title="#1 in raycast/extensions">
            <ActionPanel.Submenu title="Add Label">
              <Action
                icon={{ source: Icon.Circle, tintColor: Color.Red }}
                title="Bug"
                onAction={() => console.log("Add bug label")}
              />
              <Action
                icon={{ source: Icon.Circle, tintColor: Color.Yellow }}
                title="Enhancement"
                onAction={() => console.log("Add enhancement label")}
              />
              <Action
                icon={{ source: Icon.Circle, tintColor: Color.Blue }}
                title="Help Wanted"
                onAction={() => console.log("Add help wanted label")}
              />
            </ActionPanel.Submenu>
          </ActionPanel>
        }
      />
    </List>
  );
}
```

#### 参数

<table><thead><tr><th width="169">名称</th><th>描述</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>title<mark style="color:red;">*</mark></td><td>子菜单显示的标题。</td><td><code>string</code></td><td>-</td></tr><tr><td>autoFocus</td><td>当父 ActionPanel（或 Actionpanel.Submenu）打开时，ActionPanel.Submenu 是否应自动获得焦点。</td><td><code>boolean</code></td><td>-</td></tr><tr><td>children</td><td>子菜单的项。</td><td><a href="#actionpanel.submenu.children"><code>ActionPanel.Submenu.Children</code></a></td><td>-</td></tr><tr><td>filtering</td><td>切换 Raycast 过滤。如果为 <code>true</code>，Raycast 将使用搜索栏中的查询来过滤项目。当为 <code>false</code> 时，扩展程序需要负责过滤。</td><td><code>boolean</code> 或 <code>{ keepSectionOrder: boolean }</code></td><td>当指定 <code>onSearchTextChange</code> 时为 <code>false</code>，否则为 <code>true</code>。</td></tr><tr><td>icon</td><td>显示子菜单的图标。</td><td><a href="/pages/PpNvsIkWUpyq10IDpEBK#image.imagelike"><code>Image.ImageLike</code></a></td><td>-</td></tr><tr><td>isLoading</td><td>是否应在搜索栏旁边显示或隐藏 loading  指示器</td><td><code>boolean</code></td><td><code>false</code></td></tr><tr><td>shortcut</td><td>子菜单的键盘快捷键。</td><td><a href="/pages/eG3XofwHgHGjEJ4IlcYK#keyboard.shortcut"><code>Keyboard.Shortcut</code></a></td><td>-</td></tr><tr><td>throttle</td><td>定义 <code>onSearchTextChange</code> 处理程序是在每次按下键盘时触发还是延迟以限制事件。当将自定义过滤逻辑与异步操作（例如网络请求）结合使用时，建议设置为 <code>true</code>。</td><td><code>boolean</code></td><td><code>false</code></td></tr><tr><td>onOpen</td><td>打开子菜单时触发的回调。</td><td><code>() => void</code></td><td>-</td></tr><tr><td>onSearchTextChange</td><td>当搜索栏文本发生变化时触发回调。</td><td><code>(text: string) => void</code></td><td>-</td></tr></tbody></table>

## 类型

### ActionPanel.Children

```typescript
ActionPanel.Children: ActionPanel.Section | ActionPanel.Section[] | ActionPanel.Section.Children | null
```

ActionPanel 组件支持的子组件。

### ActionPanel.Section.Children

```typescript
ActionPanel.Section.Children: Action | Action[] | ReactElement<ActionPanel.Submenu.Props> | ReactElement<ActionPanel.Submenu.Props>[] | null
```

ActionPanel.Section 组件支持的子组件。

### ActionPanel.Submenu.Children

```typescript
ActionPanel.Children: ActionPanel.Section | ActionPanel.Section[] | ActionPanel.Section.Children | null
```

ActionPanel.Submenu 组件支持的子组件。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://raycast-doc.gitbook.io/zh/api-can-kao/user-interface/action-panel.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.