向 KeystoneJS 添加自定义管理 UI 功能

Question

我刚刚开始使用 Keystone 开发一个新项目，找不到任何描述向管理 UI 添加自定义功能的文档。

我需要实现但找不到任何相关资源的一些事情：

1. 在管理员中创建不依赖于模型的新页面。在这种情况下，我需要使用我自己的视图、前端 JS 和后端端点，我不确定如何包含这些视图或如何连接到管理 UI。有没有 Keystone 方法可以实现这一目标？
2. 定制列表页面。例如，我有一些自定义模型，我想通过在列表中拖放来重新排序，并在表上方有一个额外的保存按钮，用于将新订单提交到端点。为此，我需要一种方法在相应的列表页面中注入一些自定义 JS 和 HTML，但我不确定如何做到这一点（如果可能的话）。
3. 我不希望 Keystone 从模型中自动生成管理项目页面中的自定义字段。有没有办法劫持特定模型类型的 Keystone 视图并添加自定义元素？
4. 使用来自同一模型的 mongo 数据声明一个新模型。例如，有一个类别模型，其中有一个选择元素和其他类别，用于选择父母。

抱歉，如果这些问题已经讨论/记录，但我找不到与它们相关的任何信息。

感谢并期待您对这些问题的想法。

Answer 1

这是很多人都要求的事情，Keystone 人员正在努力解决。

他们在这里讨论了其中的一些内容：https://github.com/keystonejs/keystone/issues/220

您可以在此处跟踪功能进度：https://productpains.com/post/keystonejs/admin-interface-extensibility

Answer 2

信息：我是该存储库的作者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 })

您可以运行存储库中的示例来查看列表页面以及项目页面示例，包括时间戳过滤。所有这些都在“发布”页面中激活。