docs: add AutoLink component reference (#24)

Co-authored-by: meteorlxy <[email protected]>

Author: Mister-Hope

docs/reference/components.md

@@ -1,5 +1,83 @@
 # Built-in Components
 
+## AutoLink
+
+- Props:
+
+  - config
+    - Type: `AutoLinkConfig`
+    - Required: `true`
+
+```ts
+interface AutoLinkConfig {
+  /**
+   * Pattern to determine if the link should be active, which has higher priority than `exact`
+   */
+  activeMatch?: string | RegExp
+
+  /**
+   * The `aria-label` attribute
+   */
+  ariaLabel?: string
+
+  /**
+   * Whether the link should be active only if the url is an exact match
+   */
+  exact?: boolean
+
+  /**
+   * URL of the auto link
+   */
+  link: string
+
+  /**
+   * The `rel` attribute
+   */
+  rel?: string
+
+  /**
+   * The `target` attribute
+   */
+  target?: string
+
+  /**
+   * Text of the auto link
+   */
+  text: string
+}
+```
+
+- Usage:
+
+```md
+<AutoLink :config="autoLinkConfig" />
+
+<AutoLink :config="autoLinkConfig">
+  default slot
+</AutoLink>
+
+<AutoLink :config="autoLinkConfig">
+  <template #before>before slot</template>
+  <template #after>after slot</template>
+</AutoLink>
+
+<AutoLink :config="autoLinkConfig">
+  <template v-slot="config">{{ config.text }}</template>
+</AutoLink>
+
+<AutoLink :config="autoLinkConfig">
+  <template #before="config">{{ config.text }}</template>
+</AutoLink>
+```
+
+- Details:
+
+  This component will automatically render internal link as `<RouteLink>`, and render external link as `<a>`. It will also add necessary attributes correspondingly.
+
+  You can make use of the `before` and `after` slots to render content before and after the text. Also, you can use the `default` slot to render the text (default text is `config.text`).
+
+  This component is mainly for developing themes. Users won't need it in most cases. For theme authors, it's recommended to use this component to render links that could be either internal or external.
+
 ## ClientOnly
 
 - Usage:
@@ -73,4 +151,4 @@
 
   If the `active` prop is set to `true`, the link will have an extra `activeClass`. Notice that the active status won't be updated automatically when the route changes.
 
-  This component is mainly for developing themes. You won't need it in most cases. For theme authors, it's recommended to use this component instead of the `<RouterLink>` component from `vue-router`.
+  This component is mainly for developing themes. Users won't need it in most cases. For theme authors, it's recommended to use this component to render internal links instead of the `<RouterLink>` component from `vue-router`.

docs/zh/reference/components.md

@@ -1,5 +1,83 @@
 # 内置组件
 
+## AutoLink
+
+- Props:
+
+  - config
+    - 类型：`AutoLinkConfig`
+    - 是否必须：`true`
+
+```ts
+interface AutoLinkConfig {
+  /**
+   * 判断该链接是否被激活的模式，优先级高于 `exact`
+   */
+  activeMatch?: string | RegExp
+
+  /**
+   * `aria-label` 属性
+   */
+  ariaLabel?: string
+
+  /**
+   * 该链接是否只有在 URL 完全匹配时才激活
+   */
+  exact?: boolean
+
+  /**
+   * 自动链接的 URL
+   */
+  link: string
+
+  /**
+   * `rel` 属性
+   */
+  rel?: string
+
+  /**
+   * `target` 属性
+   */
+  target?: string
+
+  /**
+   * 自动链接的文本
+   */
+  text: string
+}
+```
+
+- 使用：
+
+```md
+<AutoLink :config="autoLinkConfig" />
+
+<AutoLink :config="autoLinkConfig">
+  default 插槽
+</AutoLink>
+
+<AutoLink :config="autoLinkConfig">
+  <template #before>before 插槽</template>
+  <template #after>after 插槽</template>
+</AutoLink>
+
+<AutoLink :config="autoLinkConfig">
+  <template v-slot="config">{{ config.text }}</template>
+</AutoLink>
+
+<AutoLink :config="autoLinkConfig">
+  <template #before="config">{{ config.text }}</template>
+</AutoLink>
+```
+
+- 详情：
+
+  该组件将会自动将内部链接渲染为 `<RouteLink>` ，将外部链接渲染为 `<a>` ，并添加必要的属性。
+
+  你可以通过 `before` 和 `after` 插槽，在文本之前和之后渲染内容。也可以通过 `default` 插槽，直接渲染文本（默认文本是 `config.text`）。
+
+  该组件主要是为了开发主题时使用，普通用户在绝大多数情况下并不会用到它。对于主题作者来说，我们建议你在不确定链接是内部链接还是外部链接时，尽量使用这个组件。
+
 ## ClientOnly
 
 - 使用：
@@ -73,4 +151,4 @@
 
   如果 `active` Prop 被设置为 `true` ，那么这个链接会被额外添加一个 `activeClass` 类名。需要注意的是，这里的 active 状态并不会根据当前路由自动更新。
 
-  该组件主要是为了开发主题时使用。在绝大多数情况下你不会用到它。对于主题作者来说，我们建议你尽可能使用这个组件，而不是使用 `vue-router` 的 `<RouterLink>` 组件。
+  该组件主要是为了开发主题时使用，普通用户在绝大多数情况下并不会用到它。对于主题作者来说，我们建议你在渲染内部链接时尽量使用这个组件，而不是使用 `vue-router` 的 `<RouterLink>` 组件。