页面数据列表操作菜单

此扩展点用于扩展页面数据列表的操作菜单项。

图 1 页面数据列表操作菜单

定义方式

export default definePlugin({
  extensionPoints: {
    "single-page:list-item:operation:create": (
      singlePage: Ref<ListedSinglePage>,
    ): OperationItem<ListedSinglePage>[] => {
      return [
        {
          priority: 10,
          component: markRaw(VDropdownItem),
          props: {},
          action: (item?: ListedSinglePage) => {
            // do something
          },
          label: "foo",
          hidden: false,
          permissions: [],
          children: [],
        },
      ];
    },
  },
});

OperationItem<T> 由 @halo-dev/ui-shared 提供，请直接使用当前依赖中的类型。priority 和使用 markRaw 包装的 component 为必需字段；props、action、label、hidden、permissions 和递归的 children 为可选字段。

priority 越小，操作项的显示位置越靠前（内置操作项通常以 0、10、20… 依次排列，如需插入到内置项之间，可选择中间值）。

示例

此示例将实现一个操作菜单项，点击后会将页面内容作为文件下载到本地。

import type { ListedSinglePage } from "@halo-dev/api-client";
import { VDropdownItem } from "@halo-dev/components";
import { definePlugin } from "@halo-dev/ui-shared";
import axios from "axios";
import { markRaw } from "vue";

export default definePlugin({
  extensionPoints: {
    "single-page:list-item:operation:create": () => {
      return [
        {
          priority: 21,
          component: markRaw(VDropdownItem),
          label: "下载到本地",
          permissions: [],
          action: async (singlePage: ListedSinglePage) => {
            const { data } = await axios.get(
              `/apis/api.console.halo.run/v1alpha1/single-pages/${singlePage.page.metadata.name}/head-content`,
            );
            const blob = new Blob([data.raw], {
              type: "text/plain;charset=utf-8",
            });
            const url = window.URL.createObjectURL(blob);
            const link = document.createElement("a");
            link.href = url;
            link.download = `${singlePage.page.spec.title}.${data.rawType}`;
            link.click();
          },
        },
      ];
    },
  },
});

类型定义

ListedSinglePage

ListedSinglePage 由 @halo-dev/api-client 提供，请直接使用当前依赖中的生成类型。它包含：

• page：独立页面资源。
• owner 和 contributors：页面所有者与贡献者。
• stats：访问、评论等统计数据。