mirror of
https://github.com/halo-dev/docs.git
synced 2026-01-20 07:06:31 +08:00
docs: update documentations for 2.21 (#502)
Signed-off-by: Ryan Wang <i@ryanc.cc>
This commit is contained in:
Ryan Wang
@@ -0,0 +1,70 @@
|
||||
---
|
||||
title: API 请求
|
||||
description: 介绍如何在插件的 UI 中请求 API 接口
|
||||
---
|
||||
|
||||
在 2.17.0 版本中，Halo 提供了新的 `@halo-dev/api-client` 包，用于简化在 Halo 内部、插件的 UI 中、外部应用程序中请求 Halo 接口的逻辑。此文档将介绍如何在插件的 UI 中使用 `@halo-dev/api-client` 包。
|
||||
|
||||
## 安装
|
||||
|
||||
```shell
|
||||
pnpm install @halo-dev/api-client axios
|
||||
```
|
||||
|
||||
## 模块介绍
|
||||
|
||||
在 `@halo-dev/api-client` 包中导出了以下模块：
|
||||
|
||||
```ts
|
||||
import {
|
||||
coreApiClient,
|
||||
consoleApiClient,
|
||||
ucApiClient,
|
||||
publicApiClient,
|
||||
createCoreApiClient,
|
||||
createConsoleApiClient,
|
||||
createUcApiClient,
|
||||
createPublicApiClient,
|
||||
axiosInstance
|
||||
} from "@halo-dev/api-client"
|
||||
```
|
||||
|
||||
- **coreApiClient**: 为 Halo 所有自定义模型的 CRUD 接口封装的 API Client。
|
||||
- **consoleApiClient**: 为 Halo 针对 Console 提供的接口封装的 API Client。
|
||||
- **ucApiClient**: 为 Halo 针对 UC 提供的接口封装的 API Client。
|
||||
- **publicApiClient**: 为 Halo 所有公开访问的接口封装的 API Client。
|
||||
- **createCoreApiClient**: 用于创建自定义模型的 CRUD 接口封装的 API Client，需要传入 axios 实例。
|
||||
- **createConsoleApiClient**: 用于创建 Console 接口封装的 API Client，需要传入 axios 实例。
|
||||
- **createUcApiClient**: 用于创建 UC 接口封装的 API Client，需要传入 axios 实例。
|
||||
- **createPublicApiClient**: 用于创建公开访问接口封装的 API Client，需要传入 axios 实例。
|
||||
- **axiosInstance**: 内部默认创建的 axios 实例。
|
||||
|
||||
## 使用
|
||||
|
||||
在 Halo 的插件项目中，如果是调用 Halo 内部的接口，那么直接使用上面介绍的模块即可，无需任何配置，在 Halo 内部已经处理好了异常逻辑，包括登录失效、无权限等。
|
||||
|
||||
其中，`coreApiClient`、`consoleApiClient`、`ucApiClient`、`publicApiClient` 模块是对 Halo 内部所有 API 请求的封装，无需传入任何请求地址，比如：
|
||||
|
||||
```ts
|
||||
import { coreApiClient } from "@halo-dev/api-client"
|
||||
|
||||
coreApiClient.content.post.listPost().then(response => {
|
||||
// handle response
|
||||
})
|
||||
```
|
||||
|
||||
如果需要调用插件提供的接口，可以直接使用 `axiosInstance` 实例，比如：
|
||||
|
||||
```ts
|
||||
import { axiosInstance } from "@halo-dev/api-client"
|
||||
|
||||
axiosInstance.get("/apis/foo.halo.run/v1alpha1/bar").then(response => {
|
||||
// handle response
|
||||
})
|
||||
```
|
||||
|
||||
此外，在最新的 `@halo-dev/ui-plugin-bundler-kit@2.17.0` 中，已经排除了 `@halo-dev/api-client`、`axios` 依赖，所以最终产物中的相关依赖会自动使用 Halo 本身提供的依赖，无需关心最终产物大小。
|
||||
|
||||
:::info 提醒
|
||||
如果插件中使用了 `@halo-dev/api-client@2.17.0` 和 `@halo-dev/ui-plugin-bundler-kit@2.17.0`，需要提升 `plugin.yaml` 中的 `spec.requires` 版本为 `>=2.17.0`。
|
||||
:::
|
||||
@@ -0,0 +1,55 @@
|
||||
---
|
||||
title: AnnotationsForm
|
||||
description: 元数据表单组件
|
||||
---
|
||||
|
||||
此组件用于提供统一的 [Annotations 表单](../../../../annotations-form.md)，可以根据 `group` 和 `kind` 属性自动渲染对应的表单项。
|
||||
|
||||
## 使用示例
|
||||
|
||||
```html
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue"
|
||||
|
||||
const annotationsFormRef = ref()
|
||||
const currentAnnotations = ref()
|
||||
|
||||
function handleSubmit () {
|
||||
annotationsFormRef.value?.handleSubmit();
|
||||
await nextTick();
|
||||
|
||||
const { customAnnotations, annotations, customFormInvalid, specFormInvalid } =
|
||||
annotationsFormRef.value || {};
|
||||
|
||||
// 表单验证不通过
|
||||
if (customFormInvalid || specFormInvalid) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 合并自定义数据和表单提供的数据
|
||||
const newAnnotations = {
|
||||
...annotations,
|
||||
...customAnnotations,
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AnnotationsForm
|
||||
ref="annotationsFormRef"
|
||||
:value="currentAnnotations"
|
||||
kind="Post"
|
||||
group="content.halo.run"
|
||||
/>
|
||||
|
||||
<VButton @click="handleSubmit">提交</VButton>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 描述 |
|
||||
|---------|------------------------------------|---------|-----------------------------------------|
|
||||
| `group` | string | 无，必填 | 定义组件所属的分组。 |
|
||||
| `kind` | string | 无，必填 | 定义组件的种类。 |
|
||||
| `value` | \{ [key: string]: string; \} \| null \| null | 可选，包含键值对的对象或空值，用于存储数据。 |
|
||||
@@ -0,0 +1,25 @@
|
||||
---
|
||||
title: AttachmentFileTypeIcon
|
||||
description: 附件文件类型图标组件
|
||||
---
|
||||
|
||||
此组件用于根据文件名显示文件类型图标。
|
||||
|
||||
## 使用示例
|
||||
|
||||
```html
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
<template>
|
||||
<AttachmentFileTypeIcon fileName="example.png" />
|
||||
</div>
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 描述 |
|
||||
|--------------|---------------------|-----------|------------------------------------|
|
||||
| `fileName` | string \| undefined | undefined | 文件名，可以是字符串或未定义。 |
|
||||
| `displayExt` | boolean | true | 可选，是否显示文件扩展名，默认为 true。 |
|
||||
| `width` | number | 10 | 可选，组件宽度，默认为 10。 |
|
||||
| `height` | number | 10 | 可选，组件高度，默认为 10。 |
|
||||
@@ -0,0 +1,50 @@
|
||||
---
|
||||
title: AttachmentSelectorModal
|
||||
description: 附件选择组件
|
||||
---
|
||||
|
||||
此组件用于调出附件选择器，以供用户选择附件。
|
||||
|
||||
:::info 注意
|
||||
此组件当前仅在 Console 中可用。
|
||||
:::
|
||||
|
||||
## 使用示例
|
||||
|
||||
```html
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue"
|
||||
|
||||
const visible = ref(false)
|
||||
|
||||
function onAttachmentSelect (attachments: AttachmentLike[]) {
|
||||
console.log(attachments)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VButton @click="visible = true">选择附件</VButton>
|
||||
|
||||
<AttachmentSelectorModal
|
||||
v-model:visible="visible"
|
||||
@select="onAttachmentSelect"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 描述 |
|
||||
|-----------|----------|---------------|--------------------------|
|
||||
| `visible` | boolean | false | 控制组件是否可见。 |
|
||||
| `accepts` | string[] | () => ["*/*"] | 可选，定义可接受的文件类型。 |
|
||||
| `min` | number | undefined | 可选，定义最小选择数量。 |
|
||||
| `max` | number | undefined | 可选，定义最大选择数量。 |
|
||||
|
||||
## Emits
|
||||
|
||||
| 事件名称 | 参数 | 描述 |
|
||||
|----------------|---------------------------------------------------|---------------------|
|
||||
| update:visible | `visible`: boolean 类型，表示可见状态。 | 当可见状态更新时触发。 |
|
||||
| close | 无 | 当弹框关闭时触发。 |
|
||||
| select | `attachments`: AttachmentLike[] 类型，表示附件数组。 | 当选择确定按钮时触发。 |
|
||||
@@ -0,0 +1,18 @@
|
||||
---
|
||||
title: FilterCleanButton
|
||||
description: 过滤器清除按钮组件
|
||||
---
|
||||
|
||||
## 使用示例
|
||||
|
||||
```html
|
||||
<script lang="ts" setup>
|
||||
function onClear () {
|
||||
console.log("clear")
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FilterCleanButton @click="onClear" />
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,48 @@
|
||||
---
|
||||
title: FilterDropdown
|
||||
description: 过滤器下拉组件
|
||||
---
|
||||
|
||||
此组件为通用的下拉筛选组件，可以接收一个对象数组作为选项，并使用 `v-model` 绑定选择的值。
|
||||
|
||||
## 使用示例
|
||||
|
||||
```html
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue"
|
||||
|
||||
const value = ref("")
|
||||
const items = [
|
||||
{
|
||||
label: "最近创建",
|
||||
value: "creationTimestamp,desc"
|
||||
},
|
||||
{
|
||||
label: "较晚创建",
|
||||
value: "creationTimestamp,asc"
|
||||
}
|
||||
]
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<FilterDropdown
|
||||
v-model="value"
|
||||
label="排序"
|
||||
:items="items"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 描述 |
|
||||
|--------------|-----------------------------------------------------------|-----------|--------------------------------------------------|
|
||||
| `items` | \{ label: string; value?: string \| boolean \| number; \}[] | 无，必填 | 包含 `label` 和可选 `value` 的对象数组。 |
|
||||
| `label` | string | 无，必填 | 组件的标签文本。 |
|
||||
| `modelValue` | string \| boolean \| number | undefined | 可选，用于绑定到组件的值，可以是字符串、布尔值或数字。 |
|
||||
|
||||
## Emits
|
||||
|
||||
| 事件名称 | 参数 | 描述 |
|
||||
|-------------------|--------------------------------------------------------|-------------------|
|
||||
| update:modelValue | `modelValue`: string \| boolean \| number \| undefined | 当模型值更新时触发。 |
|
||||
@@ -0,0 +1,26 @@
|
||||
---
|
||||
title: HasPermission
|
||||
description: 权限判断组件
|
||||
---
|
||||
|
||||
此组件用于根据权限控制元素的显示与隐藏。
|
||||
|
||||
## 使用方式
|
||||
|
||||
```html
|
||||
<script lang="ts" setup>
|
||||
import { VButton } from "@halo-dev/components"
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<HasPermission :permissions="['system:posts:manage']">
|
||||
<VButton type="danger">删除</VButton>
|
||||
</HasPermission>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 描述 |
|
||||
|---------------|----------|------|-----------------------|
|
||||
| `permissions` | string[] | 无，必填 | 定义组件所需的权限列表。 |
|
||||
@@ -0,0 +1,42 @@
|
||||
---
|
||||
title: 组件
|
||||
description: 在 Halo UI 中可使用的组件。
|
||||
---
|
||||
|
||||
此文档将介绍所有在插件中可用的组件，以及它们的使用方法和区别。
|
||||
|
||||
## 基础组件库
|
||||
|
||||
我们为 Halo 的前端封装了一个基础组件的库，你可以在插件中使用这些组件。
|
||||
|
||||
安装方式：
|
||||
|
||||
```bash
|
||||
pnpm install @halo-dev/components
|
||||
```
|
||||
|
||||
在 Vue 组件中：
|
||||
|
||||
```html
|
||||
<script lang="ts" setup>
|
||||
import { VButton } from "@halo-dev/components";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VButton>Hello</VButton>
|
||||
</template>
|
||||
```
|
||||
|
||||
所有可用的基础组件以及文档可查阅：[https://halo-ui-components.pages.dev](https://halo-ui-components.pages.dev)
|
||||
|
||||
## 业务组件和指令
|
||||
|
||||
除了基础组件库，我们还为 Halo 的前端封装了一些业务组件和指令，这些组件已经在全局注册，你可以直接在插件中使用这些组件和指令。
|
||||
|
||||
以下是所有可用的业务组件和指令：
|
||||
|
||||
```mdx-code-block
|
||||
import DocCardList from '@theme/DocCardList';
|
||||
|
||||
<DocCardList />
|
||||
```
|
||||
@@ -0,0 +1,30 @@
|
||||
---
|
||||
title: PluginDetailModal
|
||||
description: 插件详情弹窗组件
|
||||
---
|
||||
|
||||
此组件可以在 UI 部分的任意组件中打开差价的详情和设置弹窗，可以用于实现在不打断正常操作流程的情况下让用户查看和修改插件的详细信息。
|
||||
|
||||
## 使用方式
|
||||
|
||||
```html
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue"
|
||||
|
||||
const modalVisible = ref(false)
|
||||
|
||||
function onPluginDetailModalClose() {
|
||||
// Do something
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PluginDetailModal v-if="modalVisible" @close="onPluginDetailModalClose" name="starter" />
|
||||
</template>
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 描述 |
|
||||
| ------ | ------ | -------- | --------------------------------------------- |
|
||||
| `name` | string | 无，必填 | 插件名称，即 plugin.yaml 中的 `metadata.name` |
|
||||
@@ -0,0 +1,33 @@
|
||||
---
|
||||
title: SearchInput
|
||||
description: 搜索输入框组件
|
||||
---
|
||||
|
||||
此组件适用于关键词搜索场景，输入数据的过程中不会触发搜索，只有在输入完成后，点击回车才会触发搜索。
|
||||
|
||||
## 使用方式
|
||||
|
||||
```html
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue"
|
||||
|
||||
const keyword = ref("")
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SearchInput v-model="keyword" placeholder="请输入关键字" />
|
||||
</template>
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 描述 |
|
||||
|---------------|--------|-----------|----------------------------------|
|
||||
| `placeholder` | string | undefined | 可选，用于指定输入字段的占位符文本。 |
|
||||
| `modelValue` | string | 无，必填 | 用于绑定输入字段的值。 |
|
||||
|
||||
## Emits
|
||||
|
||||
| 事件名称 | 参数 | 描述 |
|
||||
|-------------------|-------------------------------------|-------------------|
|
||||
| update:modelValue | `modelValue`: string 类型，表示模型值。 | 当模型值更新时触发。 |
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
title: UppyUpload
|
||||
description: 文件上传组件
|
||||
---
|
||||
|
||||
## 使用方式
|
||||
|
||||
```html
|
||||
<script lang="ts" setup>
|
||||
const policyName = ref('my-test-policy')
|
||||
const groupName = ref('my-test-group')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UppyUpload
|
||||
endpoint="/apis/api.console.halo.run/v1alpha1/attachments/upload"
|
||||
:meta="{
|
||||
policyName: policyName,
|
||||
groupName: groupName,
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 描述 |
|
||||
|---------------------|----------------------------------------------------------------|-----------|------------------------------|
|
||||
| `restrictions` | Restrictions | undefined | 可选，指定任何限制。 |
|
||||
| `meta` | Record\<string, unknown\> | undefined | 可选，要发送的额外元数据。 |
|
||||
| `autoProceed` | boolean | false | 可选，在某些操作后自动继续。 |
|
||||
| `allowedMetaFields` | string[] | undefined | 可选，指定允许的元数据字段。 |
|
||||
| `endpoint` | string | 无，必填 | 数据发送到的端点 URL。 |
|
||||
| `name` | string | file | 可选，用于上传的表单字段的名称。 |
|
||||
| `note` | string | undefined | 可选，任何备注或描述。 |
|
||||
| `method` | "GET" \| "POST" \| "PUT" \| "HEAD" \| "get" \| "post" \| "put" | post | 可选，用于请求的 HTTP 方法。 |
|
||||
| `disabled` | boolean | false | 可选，如果为真，则禁用组件。 |
|
||||
| `width` | string | 750px | 可选，组件的宽度。 |
|
||||
| `height` | string | 550px | 可选，组件的高度。 |
|
||||
| `doneButtonHandler` | () => void | undefined | 可选，完成时调用的处理函数。 |
|
||||
|
||||
## Emits
|
||||
|
||||
| 事件名称 | 参数 | 描述 |
|
||||
|----------|------------------------------------------------------|---------------------|
|
||||
| uploaded | `response`: SuccessResponse 类型，表示上传成功的响应。 | 当文件上传成功时触发。 |
|
||||
| error | `file`: 出错的文件。<br />`response`: 出错时的响应数据。 | 当文件上传出错时触发。 |
|
||||
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: VCodemirror
|
||||
description: 代码编辑器组件
|
||||
---
|
||||
|
||||
此组件封装了 Codemirror 代码编辑器，适用于一些需要编辑代码的场景。
|
||||
|
||||
## 使用方式
|
||||
|
||||
```html
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue"
|
||||
|
||||
const value = ref("")
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCodemirror v-model="value" height="300px" language="html" />
|
||||
</template>
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 描述 |
|
||||
|--------------|-------------------------------------------------|----------|-------------------------------------------|
|
||||
| `modelValue` | string | "" | 可选，绑定到组件的字符串值，默认为空字符串。 |
|
||||
| `height` | string | auto | 可选，组件的高度，默认为 `"auto"`。 |
|
||||
| `language` | keyof typeof presetLanguages \| LanguageSupport | yaml | 代码编辑器的语言支持，默认为 `"yaml"`。 |
|
||||
| `extensions` | EditorStateConfig["extensions"] | () => [] | 可选，编辑器状态配置的扩展，默认为一个空数组。 |
|
||||
|
||||
## Emits
|
||||
|
||||
| 事件名称 | 参数 | 描述 |
|
||||
|-------------------|----------------------------------|-------------------|
|
||||
| update:modelValue | `value`: string 类型，表示模型值。 | 当模型值更新时触发。 |
|
||||
| change | `value`: string 类型，表示变更的值。 | 当值发生变化时触发。 |
|
||||
@@ -0,0 +1,18 @@
|
||||
---
|
||||
title: v-permission
|
||||
description: 权限指令
|
||||
---
|
||||
|
||||
与 [HasPermission](./has-permission.md) 组件相同，此指令也是用于根据权限控制元素的显示与隐藏。
|
||||
|
||||
## 使用方式
|
||||
|
||||
```html
|
||||
<script lang="ts" setup>
|
||||
import { VButton } from "@halo-dev/components"
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VButton type="danger" v-permission="['system:posts:manage']">删除</VButton>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,18 @@
|
||||
---
|
||||
title: v-tooltip
|
||||
description: Tooltip 指令
|
||||
---
|
||||
|
||||
此指令用于在任何元素上添加一个提示框。
|
||||
|
||||
## 使用方式
|
||||
|
||||
```html
|
||||
<script lang="ts" setup>
|
||||
import { IconDeleteBin } from "@halo-dev/components"
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<IconDeleteBin v-tooltip="'删除此文档'" />
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,120 @@
|
||||
---
|
||||
title: 路由定义
|
||||
description: 通过插件为 Console 控制台和 UC 个人中心添加新路由
|
||||
---
|
||||
|
||||
Halo 为插件提供了为 Console 控制台和 UC 个人中心添加新路由的入口，可以用于为插件单独提供一个页面。
|
||||
|
||||
此文档将介绍如何定义路由以及侧边菜单项。
|
||||
|
||||
## 定义方式
|
||||
|
||||
Console 控制台和 UC 个人中心的路由定义基本和 Vue Router 官方的保持一致，为了区分 Console 控制台和 UC 个人中心的路由，Halo 为插件提供了两个不同的路由定义入口。
|
||||
|
||||
- `routes`：Console 控制台路由定义
|
||||
- `ucRoutes`：UC 个人中心路由定义
|
||||
|
||||
```ts
|
||||
import HomeView from "./views/HomeView.vue"
|
||||
import { IconComputer } from "@halo-dev/components";
|
||||
|
||||
export default definePlugin({
|
||||
routes: [ // Console 控制台路由定义
|
||||
{
|
||||
parentName: "Root",
|
||||
route: {
|
||||
path: "/foo",
|
||||
name: "Foo",
|
||||
component: HomeView,
|
||||
meta: {
|
||||
permissions: [""],
|
||||
menu: {
|
||||
name: "Foo",
|
||||
group: "content",
|
||||
icon: markRaw(IconComputer),
|
||||
priority: 40
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
ucRoutes: [ // UC 个人中心路由定义
|
||||
{
|
||||
parentName: "Root",
|
||||
route: {
|
||||
path: "/uc-foo",
|
||||
name: "FooUC",
|
||||
component: HomeView,
|
||||
meta: {
|
||||
permissions: [""],
|
||||
menu: {
|
||||
name: "FooUC",
|
||||
group: "content",
|
||||
icon: markRaw(IconComputer),
|
||||
priority: 40
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
]
|
||||
});
|
||||
```
|
||||
|
||||
## 类型定义
|
||||
|
||||
```ts
|
||||
{
|
||||
routes?: RouteRecordRaw[] | RouteRecordAppend[];
|
||||
ucRoutes?: RouteRecordRaw[] | RouteRecordAppend[];
|
||||
}
|
||||
```
|
||||
|
||||
```ts
|
||||
export interface RouteRecordAppend {
|
||||
parentName: RouteRecordName;
|
||||
route: RouteRecordRaw;
|
||||
}
|
||||
```
|
||||
|
||||
- `parentName`：父路由名称，主要用于确认页面 Layout，如果想要添加到顶级路由，可以设置为 `Root`。如果不需要设置父路由，可以完全使用 `RouteRecordRaw` 定义。此外，如果同时设置了 `parentName` 以及其下路由设置了 `meta.menu`，那么此路由的菜单项将成为父菜单的子菜单项，可支持的父路由名称如下：
|
||||
- Console：
|
||||
- `AttachmentsRoot`（附件）
|
||||
- `CommentsRoot`（评论）
|
||||
- `SinglePagesRoot`（页面）
|
||||
- `PostsRoot`（文章）
|
||||
- `MenusRoot`（菜单）
|
||||
- `ThemeRoot`（主题）
|
||||
- `OverviewRoot`（概览）
|
||||
- `BackupRoot`（备份）
|
||||
- `PluginsRoot`（插件）
|
||||
- `SettingsRoot`（设置）
|
||||
- `UsersRoot`（用户）
|
||||
- `ToolsRoot`（工具）
|
||||
- UC：
|
||||
- `PostsRoot`（文章）
|
||||
- `NotificationsRoot`（消息）
|
||||
|
||||
:::info 提示
|
||||
`RouteRecordRaw` 来自 Vue Router，详见 [API 文档 | Vue Router](https://router.vuejs.org/zh/api/#Type-Aliases-RouteRecordRaw)
|
||||
:::
|
||||
|
||||
此外，为了方便插件在 Console 控制台和 UC 个人中心添加菜单项等操作，Halo 为 `RouteRecordRaw` 添加了 `meta` 属性，该属性为 `RouteMeta` 类型，定义如下：
|
||||
|
||||
```ts
|
||||
interface RouteMeta {
|
||||
title?: string; // 浏览器标题
|
||||
searchable?: boolean; // 是否可以在 Console 的全局搜索中搜索到
|
||||
permissions?: string[]; // UI 权限
|
||||
menu?: { // 侧边菜单配置
|
||||
name: string; // 菜单名称
|
||||
group?: CoreMenuGroupId; // 内置菜单分组 ID，如果不使用内置的分组，也可以直接填写分组名称
|
||||
icon?: Component; // 菜单图标，类型为 Vue 组件，推荐使用 https://github.com/unplugin/unplugin-icons
|
||||
priority: number; // 菜单项排序，数字越小越靠前
|
||||
mobile?: boolean; // 是否在移动端显示
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
```ts
|
||||
export type CoreMenuGroupId = "dashboard" | "content" | "interface" | "system" | "tool";
|
||||
```
|
||||
Reference in New Issue
Block a user