docs: add client-api reference

Author: meteorlxy

docs/reference/client-api.md

@@ -1,3 +1,120 @@
 # Client API
 
-> TODO
+Client API is provided by [@vuepress/client](https://www.npmjs.com/package/@vuepress/client) package, which is used for developing client files.
+
+## Composition API
+
+### useSiteData
+
+- Details:
+
+  Returns the site data ref object.
+
+### useSiteLocaleData
+
+- Details:
+
+  Returns the site data ref object of current locale.
+
+  The properties of current locale have been merged into the root-level properties.
+
+### useRouteLocale
+
+- Details:
+
+  Returns the locale path ref object of current route.
+
+  The value is one of the keys of the [locales](./config.md#locales) config.
+
+### usePageData
+
+- Details:
+
+  Returns the page data ref object of current page.
+
+### usePageFrontmatter
+
+- Details:
+
+  Returns the frontmatter ref object of current page.
+
+  The value is the `frontmatter` property of the page data.
+
+### usePageHead
+
+- Details:
+
+  Returns the head config ref object of current page.
+
+  The value is obtained by merging and deduplicating [head](./frontmatter.md#head) frontmatter and [head](./config.md#head) config.
+
+### usePageHeadTitle
+
+- Details:
+
+  Returns the head title ref object of current page.
+
+  The value is obtained by joining the page title and site title.
+
+### usePageLang
+
+- Details:
+
+  Returns the language ref object of current page.
+
+  The value is the `lang` property of the page data.
+
+## Utils
+
+### withBase
+
+- Details:
+
+  Prefix URL with site [base](./config.md#base).
+
+- Also see:
+  - [Guide > Assets > Base Helper](../guide/assets.md#base-helper)
+
+## Types
+
+In addition to the type helpers mentioned below, we also provide type definitions related to the above composition API, such as `SiteData` and `PageData`.
+
+### ClientAppSetup
+
+- Details:
+
+  Type helper for [clientAppSetupFiles](./plugin-api.md#clientappsetupfiles).
+
+- Example:
+
+Create `clientAppSetup.ts` file:
+
+```ts
+import type { ClientAppSetup } from '@vuepress/client'
+
+const clientAppSetup: ClientAppSetup = () => {
+  // ...
+}
+
+export default clientAppSetup
+```
+
+### ClientAppEnhance
+
+- Details:
+
+  Type helper for [clientAppEnhanceFiles](./plugin-api.md#clientappenhancefiles).
+
+- Example:
+
+Create `clientAppEnhance.ts` file:
+
+```ts
+import type { ClientAppEnhance } from '@vuepress/client'
+
+const clientAppEnhance: ClientAppEnhance = ({ app, router, siteData }) => {
+  // ...
+}
+
+export default clientAppEnhance
+```

docs/reference/plugin/theme-data.md

@@ -82,7 +82,7 @@ export default {
 
   Returns the theme data ref object in current locale.
 
-  The values of current locale has been merged into the root-level.
+  The properties of current locale has been merged into the root-level properties.
 
 - Example:
 

docs/zh/reference/client-api.md

@@ -1,3 +1,120 @@
 # 客户端 API
 
-> TODO
+客户端 API 是由 [@vuepress/client](https://www.npmjs.com/package/@vuepress/client) Package 提供的，用于开发客户端文件。
+
+## Composition API
+
+### useSiteData
+
+- 详情：
+
+  返回站点数据的 Ref 对象。
+
+### useSiteLocaleData
+
+- 详情：
+
+  返回当前 locale 的站点数据的 Ref 对象。
+
+  当前 locale 中的配置已经合并到顶层配置中。
+
+### useRouteLocale
+
+- 详情：
+
+  返回当前路由对应的 locale path 的 Ref 对象。
+
+  它的值是 [locales](./config.md#locales) 配置的键之一。
+
+### usePageData
+
+- 详情：
+
+  返回当前页面数据的 Ref 对象。
+
+### usePageFrontmatter
+
+- 详情：
+
+  返回当前页面 Frontmatter 的 Ref 对象。
+
+  它的值是页面数据的 `frontmatter` 属性。
+
+### usePageHead
+
+- 详情：
+
+  返回当前页面 Head 配置的 Ref 对象。
+
+  它的值是合并 [head](./frontmatter.md#head) Frontmatter 和 [head](./config.md#head) 配置，并进行去重后得到的。
+
+### usePageHeadTitle
+
+- 详情：
+
+  返回当前页面 Head 中的标题的 Ref 对象。
+
+  它的值是连接页面标题和站点标题后得到的。
+
+### usePageLang
+
+- 详情：
+
+  返回当前页面语言的 Ref 对象。
+
+  它的值是页面数据的 `lang` 属性。
+
+## 工具函数
+
+### withBase
+
+- 详情：
+
+  在 URL 前添加站点 [base](./config.md#base) 前缀。
+
+- 参考：
+  - [指南 > 静态资源 > Base Helper](../guide/assets.md#base-helper)
+
+## 类型
+
+除了下列提到的类型 Helper 以外，我们同样提供了和上述 Composition API 相关的类型定义，如 `SiteData`, `PageData` 等。
+
+### ClientAppSetup
+
+- 详情：
+
+  为 [clientAppSetupFiles](./plugin-api.md#clientappsetupfiles) 提供的类型 Helper 。
+
+- 示例：
+
+创建 `clientAppSetup.ts` 文件：
+
+```ts
+import type { ClientAppSetup } from '@vuepress/client'
+
+const clientAppSetup: ClientAppSetup = () => {
+  // ...
+}
+
+export default clientAppSetup
+```
+
+### ClientAppEnhance
+
+- 详情：
+
+  为 [clientAppEnhanceFiles](./plugin-api.md#clientappenhancefiles) 提供的类型 Helper 。
+
+- 示例：
+
+创建 `clientAppEnhance.ts` 文件：
+
+```ts
+import type { ClientAppEnhance } from '@vuepress/client'
+
+const clientAppEnhance: ClientAppEnhance = ({ app, router, siteData }) => {
+  // ...
+}
+
+export default clientAppEnhance
+```