docs: update documentations for 2.21 (#502)

Signed-off-by: Ryan Wang <i@ryanc.cc>

versioned_docs/version-2.21/developer-guide/plugin/api-reference/ui/components/index.md

@@ -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 />
+```