自定义面板 Custom Panels

有关如何在 Directus 中构建自定义面板的指南。面板是存在于Insights模块中的数据可视化的模块化单元。每个面板都存在于仪表板中，可以根据需要定位和调整大小。

扩展入口点

面板的入口点是扩展包的 src/ 文件夹中的 index 文件。它导出一个带有选项的配置对象来配置面板的行为。加载面板时，此对象由 Directus 主机导入。

入口点示例：

import PanelComponent from './panel.vue'

export default {
  id: 'custom',
  name: 'Custom',
  icon: 'box',
  description: 'This is my custom panel!',
  component: PanelComponent,
  options: [
    {
      field: 'text',
      name: 'Text',
      type: 'string',
      meta: {
        interface: 'input',
        width: 'full',
      },
    },
  ],
  minWidth: 12,
  minHeight: 8,
}

Available Options

id — 此面板的唯一键。最好使用作者前缀来限定专有面板的范围。
name — 此面板的人类可读名称。
icon — 来自 material icon set 的图标名称，或 Directus 自定义图标的扩展列表。
description — 应用程序中显示的此面板的简短描述(<80 个字符)。
component — 对面板组件的引用。
options — 面板的选项。可以是选项对象或专用的 Vue 组件。
minWidth - 仪表板上面板的最小宽度(以网格单位为单位)。
minHeight - 仪表板上面板的最小高度(以网格单位为单位)。

Panel Component

面板组件是您的扩展的一部分，只要您的面板应用于 Insights 模块内的仪表板中的数据可视化，Directus 应用程序就会呈现该组件。这个面板组件必须是 Vue 组件。编写 Vue 组件最直接的方法是使用 Vue 单文件组件语法。

使用 Vue SFC 语法的面板组件示例：

vue

<script>
export default {
  props: {
    showHeader: {
      type: Boolean,
      default: false,
    },
    text: {
      type: String,
      default: '',
    },
  },
}
</script>

<template>
  <div class="text" :class="{ 'has-header': showHeader }">
    {{ text }}
  </div>
</template>

<style scoped>
.text {
 padding: 12px;
}

.text.has-header {
 padding: 0 12px;
}
</style>

可用道具

showHeader boolean — 标题是否显示。用于基于额外/减少空间的替代样式。
dashboard uuid - 包含面板的仪表板的 UUID 字符串。
height number - 面板的当前配置高度。
width number - 面板的当前配置宽度。
now Date - 在查看包含面板的仪表板时的日期对象。

：：警告 Vue 版本
Directus 应用程序使用 Vue 3。可能有第 3 方库与 Vue 3 不兼容。 ::

访问内部系统

要访问 API 或商店等内部系统，您可以使用由@directus/extensions-sdk包导出的useApi()和useStores()可组合项。它们可以像这样在 setup() 函数中使用：

import { useApi, useStores } from '@directus/extensions-sdk'

export default {
  setup() {
    const api = useApi()

    const { useCollectionsStore } = useStores()
    const collectionsStore = useCollectionsStore()

    // ...
  },
}

Vue Options API
如果你更喜欢使用 Vue Options API，你可以直接注入 api 和 stores 属性。