Halo 插件如何为 Console 数据列表添加自定义操作菜单项list-item:operation:create【免费下载链接】haloHalo 是一款强大易用的开源建站工具从个人博客、知识库到企业官网、在线商城Halo 都能助您轻松实现一站式满足您的多样化建站需求。项目地址: https://gitcode.com/GitHub_Trending/ha/haloHalo 2 的 Console 中数据列表统一由 Entity 组件渲染Entity 组件内为每行数据预留了操作按钮插槽。当你开发插件时希望给文章、评论、插件等列表的行操作菜单追加一个自己的入口例如“导出为 Markdown 文档”就可以使用list-item:operation:create系列的 Entity 数据列表操作菜单扩展点。完成本文后你会在自己的插件中注册该扩展点使新的菜单项出现在对应数据列表的操作下拉菜单里并响应点击事件。前提条件你已有一个 Halo 插件工程其中包含 UI 插件前端项目源码入口默认约定为src/index.ts如ui-plugin/目录结构所示。UI 项目已按 Halo UI 插件构建工具包 配置了构建以 Vite 为例安装halo-dev/ui-plugin-bundler-kit、vite与vitejs/plugin-vuevite.config.ts从halo-dev/ui-plugin-bundler-kit/vite导入viteConfig自 2.26.0 起包根导入已弃用。Node.js 要求为^18.0.0 || 20.0.0。扩展点代码中用到的halo-dev/ui-shared、halo-dev/components、halo-dev/api-client与axios都可直接从 Halo 共享运行时导入ESM 输出下由 Import Map 提供无需自行打包vue的markRaw同理。支持扩展的数据列表目前支持扩展的数据列表及对应扩展点名称如下引自 扩展点文档数据列表扩展点名称文章post:list-item:operation:create评论comment:list-item:operation:create回复reply:list-item:operation:create插件plugin:list-item:operation:create备份backup:list-item:operation:create主题theme:list-item:operation:create附件attachment:list-item:operation:create每个扩展点的回调签名为(item: RefListedPost) OperationItemT[] | PromiseOperationItemT[]各列表替换为对应类型如ListedComment、Plugin、Theme、Backup、Attachment。回调接收一个 VueRef包裹的行数据可以同步返回菜单项数组也可以返回 Promise。在 UI 插件入口注册扩展点在 UI 项目的入口文件src/index.ts中用halo-dev/ui-shared的definePlugin导出插件模块并在extensionPoints中声明扩展点。下面直接采用文档示例在文章列表中添加一个“导出为 Markdown 文档”的操作菜单项import type { ListedPost } 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: { post:list-item:operation:create: () { return [ { priority: 21, component: markRaw(VDropdownItem), label: 导出为 Markdown 文档, permissions: [], action: async (post: ListedPost) { const { data } await axios.get( /apis/api.console.halo.run/v1alpha1/posts/${post.post.metadata.name}/head-content ); const blob new Blob([data.raw], { type: text/plain;charsetutf-8, }); const url window.URL.createObjectURL(blob); const link document.createElement(a); link.href url; link.download ${post.post.spec.title}.md; link.click(); }, }, ]; }, }, });示例中各字段的用途对照OperationItem类型定义见 扩展点文档export interface OperationItemT { priority: number; // 优先级越小越靠前 component: RawComponent; // 菜单项组件可以使用 halo-dev/components 中提供的 VDropdownItem也可以自定义 props?: Recordstring, unknown; // 组件的 props action?: (item?: T) void; // 点击事件 label?: string; // 菜单项名称 hidden?: boolean; // 是否隐藏 permissions?: string[]; // 权限 children?: OperationItemT[]; // 子菜单 }几点与类型定义对应的说明priority控制菜单项排序值越小越靠前示例使用21。component是菜单项组件用markRaw包裹原始组件示例使用halo-dev/components的VDropdownItem也可以传自定义组件组件的 props 通过props字段传入。action是点击事件回调参数为当前行的数据示例中为ListedPost回调内示例请求了/apis/api.console.halo.run/v1alpha1/posts/{文章名}/head-content接口取回正文再在前端构造 Blob 触发下载文件名取post.spec.title并拼接.md后缀。hidden为true时该项隐藏permissions用于声明权限children可挂子菜单。回调也可以接收行参数如(post: RefListedPost) ...在返回菜单项时按行数据动态决定hidden、label等字段不关心行数据时直接返回固定数组如示例也可以。如果你需要的是扩展列表的“显示字段”而不是操作菜单对应的是另一个扩展点list-item:field:create参见 Entity 数据列表显示字段扩展点。构建 UI 插件扩展点代码写完后按 构建工具包文档 的约定构建。推荐脚本写入 UI 项目package.json{ scripts: { dev: vite dev --modedevelopment --watch, build: vite build } }构建产物的输出位置开发模式输出到插件工程的../build/resources/main/ui或../build/resources/main/console生产模式输出到./build/dist遗留的HaloUIPluginBundlerKit兼容输出目录为src/main/resources/console。生产构建的完整输出目录需要原样保留ESM 输出额外包含保留文件名ui-plugin.json清单可能还有内容哈希命名的chunks/与assets/该文件由构建工具生成不要自行创建同名文件。开发调试时运行dev脚本即可通过--watch持续观察产物更新。验证结果安装/更新插件后在 Console 中打开文档说明的对应列表页面文章、评论、回复、插件、备份、主题、附件操作菜单可见性找到任意一行的操作下拉菜单其中应出现你注册的菜单项示例中为“导出为 Markdown 文档”位置由priority决定未出现时先确认扩展点名称与列表匹配如文章列表只能用post:list-item:operation:create以及插件的 UI 资源是否随插件正常加载。点击行为点击该菜单项后示例代码会发起head-content请求并触发浏览器下载一个以文章标题命名的.md文件收到该文件即说明action回调链路点击 → 接口请求 → 前端下载已经跑通。限制说明目前只有上表列出的 7 种数据列表支持该扩展点其他列表没有对应的list-item:operation:create扩展点名称。扩展点仅覆盖行操作菜单项这一插槽若要同时扩展行上的显示字段需要另外注册list-item:field:create扩展点见 显示字段扩展点文档两者互相独立。OperationItem中的permissions是 UI 权限标识数组路由文档中对同类permissions的说明是当前用户没有对应权限时不会注册对应内容见 路由生成文档 权限一节。【免费下载链接】haloHalo 是一款强大易用的开源建站工具从个人博客、知识库到企业官网、在线商城Halo 都能助您轻松实现一站式满足您的多样化建站需求。项目地址: https://gitcode.com/GitHub_Trending/ha/halo创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考