我刚刚开始使用 Keystone 开发一个新项目,找不到任何描述向管理 UI 添加自定义功能的文档。
我需要实现但找不到任何相关资源的一些事情:
抱歉,如果这些问题已经讨论/记录,但我找不到与它们相关的任何信息。
感谢并期待您对这些问题的想法。
这是很多人都要求的事情,Keystone 人员正在努力解决。
他们在这里讨论了其中的一些内容:https://github.com/keystonejs/keystone/issues/220
您可以在此处跟踪功能进度:https://productpains.com/post/keystonejs/admin-interface-extensibility
信息:我是该存储库的作者https://github.com/k6js/k6js
您可以在 v5 中执行此操作,但在 v6 中这些功能已被删除。您可以通过以下方式启用此功能。
在 Keystone-6 中,您只需在
admin/list-name/index.tsx
中创建列表页面和 [id].tsx
中创建项目页面即可覆盖页面。
Keystone 实际上是在其自己独立的 nextjs 实例中使用初始化内容创建这些页面。
我已经从 keystone 修改了这些 admin-ui 页面,并添加了启用一些扩展的功能。
列表页面组件:
ListPageHeader
- 您可以将组件添加到页面标题
ListPageActions
- 列表页面上的操作与项目的选择无关。
ListItemsActions
- 应用于选择项目的操作。
我还添加了一个
Update
按钮,它确实更新了许多选择。
项目页面组件:
ItemPageHeader
- 添加标题操作
ItemPageSidebar
- 在侧边栏上添加操作,这也可以通过在最新版本的 keystonef 或虚拟字段中设置 itemView.fieldPosition = 'sidebar'
来实现。
我还向时间戳字段视图添加了功能,以允许对时间戳值进行过滤。
此处为商品页面示例
// ./admin/pages/posts/[id].tsx - for item page
/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@keystone-ui/core'
import { getItemPage } from '@k6js/admin-ui/pages/ItemPage'
import { type ItemPageComponents } from '@k6js/admin-ui'
const components: ItemPageComponents = {
ItemPageHeader: ({ item }) => <div>Page Header Custom - {item?.id}</div>,
ItemPageSidebar: ({ item }) => <div>Page sidebar Custom - {item?.id}</div>,
}
export default getItemPage({ listKey: 'Post', components })
您可以运行存储库中的示例来查看列表页面以及项目页面示例,包括时间戳过滤。所有这些都在“发布”页面中激活。