+> {
+ type: T;
+ props: P;
+ key: Key | null;
+}
+
+type JSXElementConstructor =
+ | ((props: P) => InulaElement | null)
+ | (new (props: P) => Component);
+```
+
+- `ele`：输入任意待检查组件。
+
+**示例**
+
+```jsx
+import Inula, { isFragment, render } from 'openinula';
+
+function FragmentComponent(props) {
+ if (isFragment(props.children)) {
+ return <>{props.children};
+ } else {
+ return {props.children}
;
+ }
+}
+
+function App() {
+ return (
+
+ Some text
+
+ );
+}
+render(, document.getElementById('root'))
+```
+
+### isElement
+
+**功能介绍**
+
+`isElement` 用于检查给定的值是否是一个 Inula 组件。
+
+**接口定义**
+
+```tsx
+function isElement(ele: any): ele is InulaElement;
+```
+
+- `ele`：输入的任意待检查元素。
+
+**示例**
+
+```jsx
+import Inula, { isElement } from 'openinula';
+
+const componentElement = ;
+const htmlElement = Hello, World!
;
+
+console.log(isElement(componentElement)); // 输出: true
+console.log(isElement(htmlElement)); // 输出: true
+console.log(isElement('string')); // 输出: false
+```
+
+### isValidElement
+
+**功能介绍**
+
+`isValidElement` 用于检测结构体是否为合法的 `Element` 组件
+
+**接口定义**
+
+```tsx
+function isValidElement(element: KVObject | null | undefined): element is HorizonElement
;
+type KVObject = Record;
+```
+
+- `ele`：输入的任意待检查元素。
+
+**示例**
+
+```tsx
+import Inula, { isValidElement } from 'openinula';
+
+const element = Hello, World!
;
+
+console.log(isValidElement(element)); // 输出: true
+console.log(isValidElement('Hello World!')); // 输出: false
+```
+
+### isValidElementType
+
+**功能介绍**
+
+`isValidElementType` 用于检查给定的值是否是有效的 Inula 组件类型
+
+**接口定义**
+
+```tsx
+function isValidElementType(type: any): boolean;
+```
+
+- `type`：输入的任意待检查元素类型。
+
+**示例**
+
+```jsx
+import Inula, { isValidElementType } from 'openinula';
+
+console.log(isValidElementType('div')); // 输出: false
+console.log(isValidElementType(InulaComponent)); // 输出: true
+console.log(isValidElementType(() => {})); // 输出: false
+console.log(isValidElementType('string')); // 输出: true
+```
+
+### isForwardRef
+
+**功能介绍**
+
+`isForwardRef` 用于检查给定的 Inula 元素是否是一个 `ForwardRef`（转发引用）对象。
+
+**接口定义**
+
+```tsx
+function isForwardRef(ele: any): ele is InulaElement;
+```
+
+- `ele`：输入的任意待检查元素。
+
+**示例**
+
+```jsx
+import Inula, { forwardRef, isForwardRef } from 'openinula';
+
+const ForwardedComponent = forwardRef((props, ref) => (
+ Forwarded Component
+));
+
+console.log(isForwardRef(ForwardedComponent)); // 输出: true
+console.log(isForwardRef(() => {})); // 输出: false
+```
+
+### isLazy
+
+**功能介绍**
+
+`isLazy` 用于检查给定的值是否是一个懒加载组件。
+
+**接口定义**
+
+```tsx
+function isLazy(ele: any): ele is LazyComponent;
+
+type LazyComponent> = ExoticComponent> & {
+ readonly _result: T;
+};
+
+interface ExoticComponent {
+ (props: P): InulaElement | null;
+}
+```
+
+- `ele`：输入的任意待检查元素。
+
+**示例**
+
+```jsx
+import Inula, { lazy, isLazy } from 'openinula';
+
+const LazyComponent = lazy(() => import('./LazyComponent'));
+
+console.log(isLazy(LazyComponent)); // 输出: true
+console.log(isLazy(() => {})); // 输出: false
+```
+
+### isMemo
+
+**功能介绍**
+
+`isMemo` 用于检查给定的值是否是一个 `memoized` 组件
+
+**接口定义**
+
+```tsx
+function isMemo(ele: any): ele is MemoComponent;
+
+type MemoComponent> = ExoticComponent> & {
+ readonly type: T;
+ displayName?: string;
+};
+```
+
+- `ele`：输入的任意待检查元素。
+
+**示例**
+
+```jsx
+import Inula, { memo, isMemo } from 'openinula';
+
+const MemoizedComponent = memo(() => (
+ Memoized Component
+));
+
+console.log(isMemo(MemoizedComponent)); // 输出: true
+console.log(isMemo(() => {})); // 输出: false
+```
+
+### isPortal
+
+**功能介绍**
+
+`isPortal` 用于检查给定的值是否是一个 `Portal` 组件
+
+**接口定义**
+
+```tsx
+function isPortal(ele: any): ele is InulaElement;
+```
+
+- `ele`：输入的任意待检查元素
+
+**示例**
+
+```jsx
+import Inula, { isPortal, Component, createPortal } from 'openinula';
+
+class PortalComponent extends Component {
+ render() {
+ return createPortal(
+ this.props.children,
+ document.getElementById('root')
+ );
+ }
+}
+
+console.log(isPortal()); // 输出: true
+console.log(isPortal(() => {})); // 输出: false
+```
+
+### isContextProvider
+
+**功能介绍**
+
+`isContextProvider` 用于检查给定的值是否是一个 `Provider` 组件
+
+**接口定义**
+
+```tsx
+function isContextProvider(ele: any): ele is InulaElement;
+```
+
+- `ele`：输入的任意待检查元素
+
+**示例**
+
+```jsx
+import Inula, { createContext, isContextProvider } from 'openinula';
+
+const MyContext = createContext();
+
+console.log(isContextProvider(MyContext.Provider)); // 输出: true
+console.log(isContextProvider(() => {})); // 输出: false
+```
+
+### isContextConsumer
+
+**功能介绍**
+
+`isContextConsumer` 用于检查给定的值是否是一个 `Context` 组件
+
+**接口定义**
+
+```tsx
+function isContextConsumer(ele: any): ele is InulaElement;
+```
+
+- `ele`：输入的任意待检查元素
+
+**示例**
+
+```jsx
+import Inula, { createContext, isContextProvider } from 'openinula';
+
+const MyContext = createContext();
+
+console.log(isContextProvider(MyContext.Consumer)); // 输出: true
+console.log(isContextProvider(() => {})); // 输出: false
+```
\ No newline at end of file
diff --git a/packages/website-next/src/app/api/intl/page.mdx b/packages/website-next/src/app/api/intl/page.mdx
new file mode 100644
index 0000000000000000000000000000000000000000..d3a1f0c337bf4424d3f7a13d6a37375dcd4b3557
--- /dev/null
+++ b/packages/website-next/src/app/api/intl/page.mdx
@@ -0,0 +1,899 @@
+## Inula-intl简介
+
+`Inula-intl`是`openinula`提供的生态组件，主要提供了国际化功能，涵盖了基本的国际化组件和钩子函数，便于用户构建具备国际化能力的前端界面。
+
+在`Inula-intl`中，无论是组件或者Hooks，其目的就是获取当前应用程序的国际化实例，该实例提供了处理多语言文本消息、日期、时间等功能，如下面给出的示例：
+
+```tsx
+import { IntlProvider, useIntl } from 'inula-intl';
+
+export default App = () => {
+ const locale = 'en';
+ const messages = {
+ en: {
+ greeting: 'Hello, {name}!',
+ today: 'Today is {date}',
+ amount: 'Amount: {value, number}',
+ },
+ fr: {
+ greeting: 'Bonjour, {name} !',
+ today: "Aujourd'hui, c'est le {date}",
+ amount: 'Montant : {value, number}',
+ },
+ };
+
+ return (
+
+
+
+ );
+};
+
+function Component() {
+ // 获取国际化对象
+ const intl = useIntl();
+
+ // 日期国际化
+ const formattedDate = intl.formatDate(new Date(2023, 0, 1), { year: 'numeric', month: 'long', day: 'numeric' });
+
+ // 数字格式化
+ const formattedAmount = intl.formatNumber(12345.67);
+
+ return (
+
+
{intl.formatMessage({ id: 'greeting' }, { name: 'Alice' })}
+
{intl.formatMessage({ id: 'today' }, { date: formattedDate })}
+
{intl.formatMessage({ id: 'amount' }, { value: formattedAmount })}
+
+
+ {i18n.formatMessage('Hello',{name: 'Fred'})}
+ {i18n.formatDate(new Date(2023, 0, 1), {year: 'numeric',month: 'numeric',day: 'numeric'})}
+ {i18n.numberFormat(1000, {style: 'currency', currency: 'USD'})}
+
+
+ );
+};
+```
+
+
+
+```tsx
+// 示例结果
+Hello, Fred!
+January 1, 2023
+$1,000.00
+```
+
+通过对`I18n`类的学习，我们知道提供了三个核心方法来实现国际化功能，下面我们将给出三个核心方法给予详细介绍以及使用Demo。
+
+#### formatDate()
+
+**功能介绍**
+
+`formatDate`函数API主要用于国际化中的日期格式化，其根据传入参数解析出日期，`formatDate`底层是基于`DateTimeFormatter`类实现。
+
+**接口定义**
+
+```jsx
+formatDate(value: string | Date, formatOptions?: Intl.DateTimeFormatOptions): string
+```
+
+
+
+`formatDate`传入两个参数：
+
+- `value` ：其是需要日期格式化的值，有两种类型，分别为`Data` 和 `string`
+- `formatOptions`：是自定义的日期格式化类型，如果不传入，默认为浏览器日期格式
+
+> 常用的日期格式化选项包括：
+> `localeMatcher`：指定日期格式的匹配方式，可以是 'lookup'（默认，从库中查找匹配）或 'best fit'（根据浏览器的语言环境选择）
+> `weekday`：指定要显示的星期几信息的格式。可以是 'narrow'、'short'、'long'
+> `year`、`month`、`day`：指定年、月、日的显示格式。可以是 'numeric'、'2-digit'、'narrow'、'short'、'long'
+> `hour`、`minute`、`second`：指定小时、分钟、秒的显示格式。同样可以是不同的选项
+> `timeZoneName`：是否显示时区名
+> `hour12`：是否使用12小时制，默认为`true`
+>
+> ```jsx
+> // 示例
+> const options = {year: 'numeric',month: 'numeric',day: 'numeric'}
+> ```
+
+
+
+**示例**
+
+```tsx
+import I18n from 'inula-intl';
+
+const i18n = new I18n({
+ locale: 'en',
+});
+
+const date = new Date(2023, 0, 1);
+
+function App() {
+ return (
+ {i18n.formatDate(date, { year: 'numeric', month: 'numeric', day: 'numeric' })}
+ {i18n.formatDate('2023-01-01')}
+ );
+};
+```
+
+
+
+```tsx
+// 示例结果
+January 1, 2023
+1/1/2023
+```
+
+#### formatNumber()
+
+**功能介绍**
+
+`formatNumber`函数API是`inula-intl`提供的数字格式化功能接口，主要用于国际化数字，根据传入参数以及格式化类型解析出数字，及货币等格式。`formatNumber`底层是基于`NumberFormatter`类实现。
+
+**接口定义**
+
+```tsx
+formatNumber(value: string | Date, formatOptions?: Intl.NumberFormatOptions): string
+```
+
+
+
+`formatNumber`传入两个参数：
+
+- `value` ：其是需要数字格式化的值，类型为`number`
+- `formatOptions`：是自定义的数字格式化类型，如果不传入，默认为浏览器格式
+
+> 常用的格式化选项包括：
+> `style`：指定数字的格式样式。可以是 'decimal'（默认，普通数字格式）、'currency'（货币格式）或'percent'（百分比格式
+> `currency`：用于货币格式的货币代码
+> `minimumFractionDigits`：最小的小数位数
+> `maximumFractionDigits`：最大的小数位数
+> `minimumIntegerDigits`：最小的整数位数
+> `useGrouping`：是否使用千分位分隔符，默认为 true
+>
+> ```jsx
+> // 示例
+> const options = {style: 'currency', currency: 'USD'}
+> ```
+
+
+
+**示例**
+
+```jsx
+import I18n from 'inula-intl';
+
+const i18n = new I18n({
+ locale: 'en',
+});
+
+function App() {
+ return (
+ {i18n.formatNumber(1000, { style: 'currency', currency: 'USD' })}
+ {i18n.formatNumber(12345.6789, { style: 'currency', currency: 'EUR' })}
+ );
+};
+```
+
+
+
+```tsx
+// 示例结果
+$1,000.00
+€12,345.68
+```
+
+#### formatMessage()
+
+**功能介绍**
+
+`formatMessage` 是`inula-intl`提供的消息格式化功能接口，其主要针对较复杂的信息在运行时进行格式化。
+
+**接口定义**
+
+```tsx
+formatMessage(id: MessageDescriptor | string, values?: Object | undefined, messageOptions?: MessageOptions): string;
+
+interface MessageDescriptor extends MessageOptions {
+ id: string;
+ defaultMessage?: string | object;
+ defaultValues?: Record;
+}
+interface MessageOptions {
+ comment?: string;
+ message?: string;
+ context?: string;
+ formatOptions?: FormatOptions;
+}
+```
+
+
+
+- `id`：id是唯一标识符，其可以是`MessageDescriptor`对象，也可以是`string`类型
+- `value`：复杂消息中，格式化需要的变量值
+- `MessageOptions`：消息格式化选项，其包含了消息的描述，格式化文本消息等信息。
+
+**示例**
+
+```tsx
+import I18n from 'inula-intl';
+
+const i18n = new I18n({
+ locale: 'en',
+ message: {
+ 'greeting': 'Je m'appelle {name}'
+ }
+});
+
+function App() {
+ return intl.formatMessage({id: 'greeting'}, { name: 'Fred' });
+}
+```
+
+
+
+```jsx
+// 示例结果
+Je m'appelle Fred
+```
+
+### DateTimeFormatter
+
+**功能介绍**
+
+`DateTimeFormatter`类主要提供了时间格式化方法，开发者可以基于类直接进行格式化而不需要获取`i18n`实例。
+
+**类定义**
+
+```tsx
+class DateTimeFormatter {
+ constructor(locales: Locales, formatOptions?: Intl.DateTimeFormatOptions, cache?: I18nCache);
+ dateTimeFormat(value: DatePool, formatOptions: FormatOptions): string;
+}
+```
+
+
+
+`DateTimeFormatter`类实例化参数：
+
+- `locales`：必须参数，即可以是`string`也可以是数组类型，默认为'zh'
+- `formatOptions`：可选参数，日期格式化选项，默认采用浏览器日期格式
+- `cache`：可选参数，缓存
+
+> ```jsx
+> // 示例
+> const options = {year: 'numeric',month: 'numeric',day: 'numeric'}
+> ```
+
+
+
+**示例**
+
+```jsx
+import { DateTimeFormatter } form 'inula-intl'
+
+const date = new DateTimeFormatter('en', {year: 'numeric',month: 'numeric',day: 'numeric'}, true)
+
+date.dateTimeFormat(new Date());
+```
+
+
+
+在上述示例中，通过`DateTimeFormatter`类实例化出`data`实例，可以对传入的参数`new Date()`进行时间格式化，按照给定的时间格式` {year: 'numeric',month: 'numeric',day: 'numeric'}`。
+
+### NumberFormatter
+
+**功能介绍**
+
+`NumberFormatter`类主要提供了数字格式化方法，开发者可以基于类直接进行格式化而不需要获取`i18n`实例。
+
+**类定义**
+
+```tsx
+class NumberFormatter {
+ constructor(locales: Locales, formatOption?: Intl.NumberFormatOptions, cache?: In18nCache);
+ numberFormat(value: number, formatOption?: Intl.NumberFormatOptions): string;
+}
+```
+
+
+
+`NumberFormatter`类实例化参数：
+
+- `locales`：必须参数，即可以是`string`也可以是数组类型，默认为'zh'。
+- `formatOptions`：可选参数，数字格式化选项，默认采用浏览器数字格式
+- `cache`：可选参数，缓存。
+
+> ```jsx
+> // 示例
+> const options = {style: 'currency', currency: 'USD'}
+> ```
+
+
+
+**示例**
+
+通过实例化`NumberFormatter`类来直接实现数字国际化，如
+
+```jsx
+import { NumberFormatter } form 'inula-intl'
+
+const number = new NumberFormatter('en',{style: 'currency', currency: 'USD'}, true)
+
+number.numberFormat(1000);
+```
+
+
+
+在上述示例中，通过`NumberFormatter`类实例化出`number`实例，可以对传入的参数`1000`进行时间格式化，按照给定的时间格式`{style: 'currency', currency: 'USD'}`。
+
+## 组件式API
+
+### IntlProvider
+
+**功能介绍**
+
+``该组件用于创建国际化上下文，管理程序中的语言文本消息和本地化资源信息。通常在使用时用此组件包裹应用根组件，以便完成国际化的功能。
+
+**接口定义**
+
+```tsx
+type I18nProviderProps = I18nContextProps & configProps
+
+export interface I18nContextProps {
+ i18n?: I18n;
+}
+
+export interface configProps {
+ locale?: Locale;
+ messages?: AllMessages;
+ defaultLocale?: string;
+ RenderOnLocaleChange?: boolean;
+ children?: any;
+ cache: I18nCache
+}
+
+type AllMessages = Record | Record;
+type CompiledMessage = string | CompiledMessagePart[];
+type CompiledMessagePart = string | Array | Record>;
+```
+
+
+
+- `i18n`：I18n类实例
+- `locale`：可选参数，本地语言，默认设置为 'zh'
+- `messages`：可选参数，加载国际化的文本消息
+- `defaultLocale`：默认语言，默认设置为'zh'
+- `RenderOnLocaleChange`：语言渲染开关键
+- `children`：子组件
+- `cache`：可选参数，缓存
+
+**示例**
+
+```tsx
+import {IntlProvider} from 'inula-intl';
+
+const App = () => {
+ const locale = 'en';
+ const message = {
+ 'greeting': 'hello,world!'
+ };
+ return (
+
+ {children}
+
+ );
+};
+```
+
+上述示例中，`` 主要是传递国际化所需要的本地数据和配置信息给其他组件使用，因此一般使用是包裹着子组件。`{children}`。通过将`lcoale`以及`message`值传给子组件。
+
+### RawIntlProvider
+
+**功能介绍**
+
+`` 作用与``一样，是用于提供国际化（`i18n`）的上下文环境。与``不同，`` 内部不对国际化对象进行处理，开发者必须传入`i18n`对象，因此在使用时需要结合`createIntl`来使用。
+
+**接口定义**
+
+```ts
+interface RawIntlProviderProps {
+ value: I18n;
+ children?: any;
+}
+```
+
+
+
+- `value`：接受一个 `I18n `对象，该对象包含了国际化的配置和翻译信息。你可以使用[createIntl](###createIntl)函数来创建`I18n`对象，也可以通过`I18n`类实例化对象。
+- `children`：可选属性，表示要包裹在``内部的子组件
+
+**示例**
+
+```tsx
+import { RawIntlProvider, createIntl } from 'inula-intl';
+
+ const locale = 'en';
+ const messages = {
+ 'greeting': 'hello,world!'
+ };
+
+ const intl = createIntl({
+ locale: locale,
+ messages: messages
+ },
+ cache
+ );
+
+function App() {
+ return (
+
+ {children}
+
+ );
+};
+```
+
+
+
+> 说明：
+> `` 是`Inula-intl`库的底层组件，一般较少直接使用。通常推荐开发者使用`Inula-intl` 提供的高级组件，如`IntlProvider`。
+
+### FormattedMessage
+
+**功能介绍**
+
+`` 组件主要用于格式化多语言信息，其可以处理日期、时间、数字格式化以及翻译字符串等任务。该组件使用 `formatMessage` API进行描述
+
+**接口定义**
+
+```tsx
+export interface FormattedMessageProps extends MessageDescriptor {
+ values?: object;
+ tagName?: string;
+ children?(nodes: any[]): any;
+}
+
+export interface MessageDescriptor {
+ id: string;
+ defaultMessage?: string;
+ defaultValues?: Record;
+}
+```
+
+
+
+- `id`：必须参数，消息的唯一标识符，用于在消息资源文件中查找对应的翻译文本消息
+- `defaultValues`：可选参数，默认值为`{}`
+- `defaultMessage`：可选参数，默认国际化消息
+- `values`：表示一个对象，包含要插入到消息中的动态值
+- `tagName`：表示一个需要渲染的HTML标签名，如`div`或者`p`标签。如果不指定，则默认为`<>`
+- `children`：可选参数，表示用于自定义渲染的消息内容
+
+**示例**
+
+```tsx
+import { FormattedMessage } from 'inula-intl';
+
+const App = () => {
+ const name = 'John Doe';
+
+ return (
+
+
+
+
+
+ );
+};
+```
+
+
+
+```tsx
+// 示例结果
+Hello, John Doe!
+```
+
+## 函数式API
+
+### useIntl()
+
+**功能介绍**
+
+`useIntl` hook 主要是函数式组件使用，其提供了一种简单的方式来获取当前应用程序的`I18n`实例，便于开发者使用国际化功能。
+
+**接口定义**
+
+```jsx
+function useIntl(): IntlType;
+
+export type IntlType = {
+ i18n: I18n;
+ formatMessage: Function;
+ formatNumber: Function;
+ formatDate: Function;
+};
+```
+
+
+
+- `intl`：表示获取到的国际化对象，其主要包含了i18n对象以及国际化的三个方法
+
+**示例**
+
+假设你已经通过如下的代码，传递给子组件`locale`和`message`，并在`useIntlDemo.js`函数用来实现国际化
+
+```tsx
+import {IntlProvider} from 'inula-intl';
+
+const App = () => {
+ const locale = 'en';
+ const message = {
+ 'greeting': 'Hello,world!'
+ };
+ return (
+
+ {children}
+
+ );
+};
+```
+
+
+
+使用`useIntl` 钩子函数可以访问如下功能：
+
+- **格式化消息**: 使用`formatMessage`函数可以格式化消息字符串。你可以定义一系列消息，在不同语言环境下进行翻译，并且根据当前语言环境获取到国际化的消息。例如：
+
+ ```jsx
+ // useIntlDemo.js
+ const useIntlDemo = () => {
+ const intl = useIntl();
+ const message = intl.formatMessage({ id: 'greeting' });
+ };
+ ```
+
+ 示例结果：
+
+ ```tsx
+ Hello,world!
+ ```
+
+- **格式化时间日期**: 使用`formatDate`函数来格式化日期和时间。`formatDate`函数会根据当前语言环境和所设置的格式选项返回相应的格式化结果。例如：
+
+ ```jsx
+ // useIntlDemo.js
+ const useIntlDemo = () => {
+ const intl = useIntl();
+ const formattedDate = intl.formatDate(new Date(2023, 0, 1), { year: 'numeric', month: 'long', day: 'numeric' });
+ };
+
+ ```
+
+ 示例结果：
+
+ ```tsx
+ 1/1/2023
+ ```
+
+- **格式化数字**: 使用`formatNumber`函数来格式化数字。`formatNumber`函数可以根据当前语言环境和所设置的格式选项返回相应的格式化结果。例如：
+
+ ```jsx
+ // useIntlDemo.js
+ const useIntlDemo = () => {
+ const intl = useIntl();
+ const formattedNumber = intl.formatNumber(1000, { style: 'currency', currency: 'USD' });
+ };
+
+ ```
+
+ 示例结果：
+
+ ```tsx
+ $1,000.00
+ ```
+
+### createIntl()
+
+**功能介绍**
+
+`createI18n` 函数用于创建国际化`i18n`实例，以获取相关的国际化功能。
+
+**接口定义**
+
+```tsx
+function createI18n(config: ConfigProps, cache?: I18nCache);
+
+// 配置文件参数
+export interface ConfigProps {
+ locale?: Locale;
+ messages?: AllMessages;
+ defaultLocale?: string;
+ RenderOnLocaleChange?: boolean;
+ children?: any;
+ cache?: I18nCache;
+}
+```
+
+
+
+- `config`：必须参数，是获取国际化对象所传递的参数，如`locale`和`message`
+- `cache`：可选参数，缓存。通过[creatIntlCache](### "creatIntlCache")创建，用于优化应用程序性能参数
+
+**示例**
+
+```tsx
+import { createIntl, createIntlCache, IntlProvider } from 'inula-intl';
+
+const cache = createIntlCache();
+const props = {
+ locale: 'en',
+ messages: {
+ greeting: 'hello, world',
+ },
+};
+
+const Component = (props) => {
+ // 受渲染时机影响，createIntl方式需控制时序，否则慢一拍
+ const intl = createIntl({ ...props }, cache);
+ const msg = intl.formatMessage({ id: 'greeting' });
+
+ return (
+
+ createIntl-Demo
+ {msg}
+
+ );
+};
+```
+
+
+
+### creatIntlCache()
+
+**功能介绍**
+
+`creatIntlCache` 接口是创建供全局使用的国际化缓存示例，其主要保证国际化的性能，是基于内存的缓存接口。
+
+**接口定义**
+
+```tsx
+function creatI18nCache(): I18nCache;
+
+// I18n国际化缓存接口
+export interface I18nCache {
+ dateTimeFormat: Record;
+ numberFormat: Record;
+ plurals: Record;
+ select: Record;
+ octothorpe: Record;
+}
+```
+
+
+
+**示例**
+
+`creatIntlCache`一般作为 `createIntl(config, cache?)`的第二个参数使用:
+
+```jsx
+const cache = createIntlCache();
+const intl = createIntl(config, cache);
+```
+
+
+
+> 当开发者使用通过`createIntl`创建国际化对象时，可以传入`createIntlCache`函数进行创建缓存来加快应用程序的效率。`cache`是可选参数，如果您忽略这个参数，`Inula-intl`会默认为您创建缓存，来存储国际化资源，以便优化程序性能。
+
+### injectIntl()
+
+**功能介绍**
+
+`injectIntl`用于实现国际化的高阶组件(Higher-Order Component，HOC)，将国际化所需要的上下文注入到组件中的`props`中，使组件能够使用国际化功能，`injectintl`高阶组件主要使用于类组件。
+
+**接口定义**
+
+```jsx
+function injectIntl(Component, options?: InjectOptions);
+```
+
+
+
+- `Component`：表示需要国际化的组件
+- `options`：可选参数，表示注入选项的配置对象
+
+```jsx
+export interface InjectOptions {
+ isUsingForwardRef?: boolean;
+ ensureContext?: boolean;
+}
+```
+
+
+
+- `isUsingForwardRef`:可选参数，用于指示被包装的组件是否使用了 `forwardRef`
+- `ensureContext`: 可选参数，布尔值，用于判断是否传递了正确的国际化上下文。如果设置为 `true`，当没有提供上下文时，`injectIntl` 将在控制台上显示警告信息。默认值为 `false`
+
+**示例**
+
+使用`injectIntl`时，我们通常将一个组件用`injectIntl`包裹，被包裹的组件会通过`props`接收国际化对象`intl`。它包含了格式化消息、日期、时间等方法，还可以获取当前语言环境、格式化文本消息等信息。
+
+```tsx
+import { Component } from 'openinula';
+import { injectIntl } from 'inula-intl';
+
+class App extends Component {
+ constructor(props) {
+ super(props);
+ }
+
+ render() {
+ const { intl } = this.props;
+ return (
+
+ {intl.formatMessage({ id: 'greeting' })}
+
+ );
+ };
+};
+
+export default injectIntl(App);
+```
\ No newline at end of file
diff --git a/packages/website-next/src/app/api/inulax/page.mdx b/packages/website-next/src/app/api/inulax/page.mdx
new file mode 100644
index 0000000000000000000000000000000000000000..da5d146abe1ab9c5dfea33665f29144040d49928
--- /dev/null
+++ b/packages/website-next/src/app/api/inulax/page.mdx
@@ -0,0 +1,482 @@
+Inula-X 是集成在 openinula 框架中用于状态管理的库。它能集中式地存储、管理应用中所有组件的状态，并通过相应的规则 (`actions`) 保证状态 (`state`) 以可预测的方式发生变化。
+
+## 核心概念 -- `Store` 对象
+
+**功能介绍**
+
+`Store` 是 Inula-X 用于存储的对象，一个 Store 对象由 `id`, `state`, `actions`, `computed` 4个部分组成，并通过 `id` 来标识不同的对象。注意 `state`, `actions`, `computed` 的属性或方法**不能重名**。`Store` 对象可以由 [`createStore`](#createstore) 方法创建，下面是一个Store对象的整体示例：
+
+**示例**
+
+```tsx
+const store = createState({
+ // id 用于标识一个Store对象
+ id: 'user',
+
+ // state 用于存放数据
+ state: {
+ data: {
+ list: [
+ { id: 1, name: 'liming', age: 18 },
+ { id: 2, name: 'xiaohong', age: 20 },
+ ],
+ },
+ loading: false,
+ selectUsers: [1],
+ },
+
+ // action 用于修改state中的数据
+ actions: {
+ addUser(state, payload) {
+ state.data.list.push(payload);
+ },
+
+ addSelectedUser(state, payload) {
+ state.selectUsers.push(payload);
+ },
+
+ setLoading(state) {
+ state.loading = true;
+ },
+ },
+
+ // computed 用于获取state状态变量的计算属性
+ computed: {
+ users: state => state.data.list,
+
+ userCount(states) {
+ // 通过this获取其他computed的值
+ return this.users.length;
+ },
+ },
+});
+```
+
+### state
+
+`state` 是 `Store` 中存储数据的部分，通常把组件间需要共享的状态存放在 `state` 中。`state` 属性是**响应式**的，当某一个 `state` 的数据被修改，使用到这个数据的组件会更新，`state` 具有精细的数据监听的粒度，例如：组件A使用了 `name` 属性，组件B使用了 `age` 属性，当 `name` 属性被修改时，组件A会重选渲染，组件B则不会重新渲染。
+
+可通过 `$s` 访问 Store 对象中的 `state`，也可以直接通过 `state` 属性名称访问，两者的效果相同。
+
+> **注意**：state 的修改只应该在 `actions` 中进行，不应该在 `actions` 之外修改 `state`。
+
+```tsx
+const getStore = createStore({
+ id: 'value',
+ state: {
+ val: 0,
+ },
+});
+
+function App() {
+ const store = getStore();
+
+ return (
+ <>
+ {store.val}
+ {store.$s.val}
+
+ );
+}
+```
+
+### actions
+
+`actions` 是 `state` 中处理数据逻辑的部分，对 `state` 的修改都应该在 `actions` 中进行。
+
+可通过 `$a` 访问 Store 对象中的 `actions`，也可以直接通过 `actions` 函数名称访问，两者的效果相同。
+
+```tsx
+const getStore = createStore(
+ {
+ id: 'value',
+ state: {
+ val: 0,
+ },
+ actions: {
+ plusOne(state) {
+ state.val += 1;
+ },
+ plusValue(state, value) {
+ state.val += value;
+ },
+ },
+ },
+);
+
+function App() {
+ const store = getStore();
+
+ return (
+ <>
+ {store.val}
+ {/* 修改state值 */}
+
+
+
+ );
+}
+```
+
+`action` 分为同步 `action` 和异步 `action`，如果 `action` 中使用了异步函数，则需要通过`async` 将该 `action` 声明为异步 `action`。
+
+- 同步action
+
+```tsx
+const getStore = createStore({
+ id: 'user',
+ state: {
+ visible: true
+ },
+ actions: {
+ update(state, payload) {
+ // 更新user信息是同步方法，action为同步action
+ const data = updateUsersync(payload);
+ if (data.success) {
+ // 可以通过this调用该store其他的action
+ this.hideModal();
+ }
+ },
+ hideModal(state) {
+ state.visible = false;
+ },
+ },
+});
+```
+
+- 异步action
+
+```tsx
+const getStore = createStore({
+ id: 'user',
+ state: {
+ visible: true
+ },
+ actions: {
+ async update(state, payload) {
+ // 更新user信息是异步方法，action为异步action
+ const data = await updateUser(payload);
+ if (data.success) {
+ // 可以通过this调用该store其他的action
+ this.hideModal();
+ }
+ },
+ hideModal(state) {
+ state.visible = false;
+ },
+ },
+});
+```
+
+### computed
+
+**功能介绍**
+
+`computed` 是一种用来获取 `state` 状态变量的计算属性，它可以根据依赖关系进行缓存，当它的相关依赖发生改变时才会重新计算。
+
+可通过 `$c` 访问 Store 对象中的 `computed` 函数，也可以通过 `computed` 属性名称访问。**两者效果不同**，前者获取计算属性函数，后者直接获取计算属性的值。
+
+**示例**
+
+```tsx
+const getStore = createStore({
+ id: 'user',
+ state: {
+ data: {
+ list: [
+ { id: 1, name: 'liming', age: 18 },
+ { id: 2, name: 'xiaohong', age: 20 },
+ ],
+ },
+ loading: false,
+ },
+
+ computed: {
+ users: state => state.data.list,
+
+ userCount(states) {
+ // 通过this获取其他computed的值
+ return this.users.length;
+ },
+ },
+});
+
+function User() {
+ const st = getStore();
+
+ return (
+
+
User count is {st.userCount}
+ {/* 也可以使用 st.$c.userCount() */}
+
+
loading status is {this.store.loading ? 'true' : 'false'}
+
+ {/* 当点击按钮切换 loading 的值时，触发 listener */}
+
+
loading status is {store.loading ? 'true' : 'false'}
+
+ {/* 当点击按钮切换 loading 的值时，触发 listener */}
+
+
{st.val}
+
+
+ );
+}
+```
+
+## createStore()
+
+**功能介绍**
+
+`createStore` 是 openinula 状态管理器 Inula-X 中用于创建 Store 对象的函数。一个 openinula 应用中可以创建多个 `Store` 对象，`Store` 通过 `id` 来标识不同的对象。
+
+**接口定义**
+
+```tsx
+function createStore(config: StoreConfig): () => StoreObj
+
+type StoreConfig = {
+ id?: string;
+ state?: S;
+ actions?: A;
+ computed?: C;
+ options?: {
+ isReduxAdapter?: boolean;
+ };
+}
+```
+
+**参数说明**
+
+- `config`：一个包含 `id`, `state`, `actions`, `computed` 的 Store 对象，注意 `state`, `actions`, `computed` 的属性或方法**不能重名**。
+
+**返回值**
+
+`createStore` 返回一个函数，调用该函数得到 `StoreObj` 对象，`StoreObj` 对象的结构如下：
+
+```tsx
+type StoreObj = {
+ $s: S;
+ $a: {[K in keyof A]: Action};
+ $c: {[K: string]: (state: S) => any}
+ $queue: {[K in keyof A]: AsyncAction};
+ $listeners;
+ $subscribe: (listener: (mutation) => void) => void;
+ $unsubscribe: (listener: (mutation) => void) => void;
+} & { [K in keyof S]: S[K] } & { [K in keyof A]: Action } & { [K in keyof C]: ReturnType };
+```
+
+- 可通过 `$s` 访问 Store 对象中的 `state`;
+- 可通过 `$a` 访问 Store 对象中的 `actions`;
+- 可通过 `$c` 访问 Store 对象中的 `computed`;
+
+## useStore()
+
+**功能介绍**
+
+`useStore` 是 openinula 中的一个 Hooks 函数，用于在函数式组件中获取 Store 对象。
+
+**接口定义**
+
+```tsx
+function useStore(id: string): StoreObj
+```
+
+**参数说明**
+
+- `id`：要使用的Store对象的 id 值。
+
+## clearStore()
+
+**功能介绍**
+
+从openinula应用中移除对应的 Store 对象。
+
+**接口定义**
+
+```tsx
+function clearStore(id: string): void
+```
+
+**参数说明**
+
+- `id`：要删除的Store对象的id值。
\ No newline at end of file
diff --git a/packages/website-next/src/app/api/layout.tsx b/packages/website-next/src/app/api/layout.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..292d40d4302ba19a45da896f00c83585e6884132
--- /dev/null
+++ b/packages/website-next/src/app/api/layout.tsx
@@ -0,0 +1,66 @@
+import { ReactNode } from 'react'
+import { Layout } from 'nextra-theme-docs'
+import { getPageMap } from 'nextra/page-map'
+import 'nextra-theme-docs/style.css'
+
+export const metadata = {
+ // Define your metadata here
+ // For more information on metadata API, see: https://nextjs.org/docs/app/building-your-application/optimizing/metadata
+}
+
+export default async function RootLayout({children}: Readonly<{ children: ReactNode }>) {
+ //const allPages = await getPageMap()
+
+ const docsMap = [
+ {
+ name: 'api',
+ route: '/api',
+ title: '官方组件',
+ kind: 'Folder',
+ children: [
+ {
+ name: 'core',
+ route: '/api/core',
+ title: 'Inula',
+ kind: 'MdxPage'
+ },
+ {
+ name: 'inulax',
+ route: '/api/inulax',
+ title: 'Inula-X',
+ kind: 'MdxPage'
+ },
+ {
+ name: 'intl',
+ route: '/api/intl',
+ title: 'Inula-intl',
+ kind: 'MdxPage'
+ },
+ {
+ name: 'router',
+ route: '/api/router',
+ title: 'Inula-router',
+ kind: 'MdxPage'
+ },
+ {
+ name: 'request',
+ route: '/api/request',
+ title: 'Inula-request',
+ kind: 'MdxPage'
+ }
+ ]
+ }
+ ]
+
+ return (
+
+
+ {children}
+
+
+ )
+}
\ No newline at end of file
diff --git a/packages/website-next/src/app/api/page.mdx b/packages/website-next/src/app/api/page.mdx
new file mode 100644
index 0000000000000000000000000000000000000000..3971b59058b045e741ee8e1e550364a0b6a464b8
--- /dev/null
+++ b/packages/website-next/src/app/api/page.mdx
@@ -0,0 +1,24 @@
+# API 组件总览
+
+
\ No newline at end of file
diff --git a/packages/website-next/src/app/api/request/page.mdx b/packages/website-next/src/app/api/request/page.mdx
new file mode 100644
index 0000000000000000000000000000000000000000..0d141018ad87ba1a5c1f88e19104a8ae23ea4a3e
--- /dev/null
+++ b/packages/website-next/src/app/api/request/page.mdx
@@ -0,0 +1,1302 @@
+欢迎使用`inula-request`请求组件，接下来本文档将对`inula-request` API使用进行一个详细介绍，帮助您更便捷地发送网络请求！
+
+## Inula-request请求方法引入
+
+方便起见，该文档将使用`ir`别名介绍`inula-request`请求方法，即使用如下方式导入请求组件：
+
+```typescript
+import ir from 'inula-request';
+```
+
+## Inula-request 全局 API
+
+### ir(config)
+
+**功能介绍**
+
+该请求方法为通用请求方法，可以通过配置`config`参数完成多种形式的网络请求，关于`config`具体参数配置将在[参数配置章节](#请求配置全量参数)详细介绍。
+
+**接口定义**
+
+```typescript
+ir(config: IrRequestConfig): Promise>;
+```
+
+其中请求配置参数类型`IrRequestConfig`和请求响应类型`IrResponse`定义如下：
+
+```typescript
+// 请求配置
+interface IrRequestConfig {
+ url?: string;
+
+ method?: Method;
+
+ // 公共URL前缀
+ baseURL?: string;
+
+ headers?: Record;
+
+ params?: Record | null;
+
+ // 请求参数序列化函数
+ paramsSerializer?: (params: any) => string;
+
+ data?: any;
+
+ timeout?: number;
+
+ // 超时错误消息
+ timeoutErrorMessage?: string;
+
+ // 是否发送凭据
+ withCredentials?: boolean;
+
+ // 响应类型
+ responseType?: ResponseType;
+
+ // 上传进度事件回调
+ onUploadProgress?: (progressEvent: any) => void;
+
+ // 下载进度事件回调
+ onDownloadProgress?: (progressEvent: any) => void;
+
+ // 状态码校验函数
+ validateStatus?: (status: number) => boolean;
+
+ // 请求取消令牌
+ cancelToken?: CancelToken;
+
+ signal?: AbortSignal;
+
+ // 过渡选项
+ transitional?: TransitionalOptions;
+}
+
+// 请求响应
+type IrResponse = {
+ // 响应数据
+ data: T;
+
+ // 响应状态码
+ status: number;
+
+ // 响应状态消息
+ statusText: string;
+
+ // 响应头
+ headers: any;
+
+ // 请求配置
+ config: IrRequestConfig;
+
+ // 请求对象
+ request?: any;
+
+ // 响应事件消息
+ event?: string;
+};
+```
+
+**示例**
+
+```typescript
+ir({
+ url: 'https://www.example.com/data',
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ data: {
+ name: 'inula-request'
+ },
+ timeout: 5000
+})
+ .then(response => {
+ // 处理成功响应
+ })
+ .catch(error => {
+ // 处理错误
+ });
+```
+
+使用`ir(config)`方法可以灵活地定制请求的各个参数，以满足特定的需求，并注意正确处理成功响应和错误情况。
+
+### ir(url[, config])
+
+**功能介绍**
+
+该接口提供一种简化的请求方式，您可以将网络请求的`URL`作为请求方法的第一个参数，省略其他复杂的配置，`inula-request`请求组件将为您发送一个默认的`GET`请求，在多数简单`GET`请求场景中，您可以使用这种方式来简化您的代码。
+
+**接口定义**
+
+```typescript
+ir(url: string[, config: IrRequestConfig]): Promise>;
+```
+
+**示例**
+
+```typescript
+ir('https://www.example.com/data', {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+})
+ .then(response => {
+ // 处理成功响应
+ })
+ .catch(error => {
+ // 处理错误
+ });
+
+// 简化写法
+ir('https://www.example.com/data')
+ .then(response => {
+ // 处理成功响应
+ })
+ .catch(error => {
+ // 处理错误
+ });
+```
+
+在上面的示例中，将 `url` 作为请求的第一个参数，发送了一个 `GET` 请求，您也可以使用第二个示例这种简化形式，不显式设置请求方法会默认发送 `GET` 请求并配置正确的 `Content-Type` 请求头。
+
+### ir.request(config) & ir.request(url[, config])
+
+**功能介绍**
+
+`ir.request(config) & ir.request(url[, config])`为`ir(config) & ir(url[, config])`的完整表达方式，其功能完全等同，接口定义和代码使用用法参见 [ir(config)](#ir(config)) 和 [ir(url[, config])](#ir(config)) 章节。
+
+**接口定义**
+
+参见 [ir(config)](#ir(config)) 和 [ir(url[, config])](#ir(config)) 章节。
+
+**示例**
+
+参见 [ir(config)](#ir(config)) 和 [ir(url[, config])](#ir(config)) 章节。
+
+### ir.get(url[, config])
+
+**功能介绍**
+
+该接口将发送`GET`网络请求并返回一个`Promise`对象。
+
+**接口定义**
+
+```typescript
+ir.get(url: string, config?: IrRequestConfig): Promise>;
+```
+
+**示例**
+
+```typescript
+// 使用默认配置发送GET请求
+ir.get('https://www.example.com/data')
+ .then(response => {
+ // 请求成功，处理响应数据
+ })
+ .catch(error => {
+ // 请求失败，处理错误
+ });
+
+// 使用自定义配置发送GET请求
+ir.get('https://www.example.com/data', {
+ params: {
+ id: 123,
+ sortBy: 'name'
+ },
+ headers: {
+ 'X-Requested-With': 'XMLHttpRequest',
+ 'Authorization': 'your-token'
+ }
+})
+ .then(response => {
+ // 处理响应数据
+ })
+ .catch(error => {
+ // 处理错误
+ });
+```
+
+上述示例中，通过`ir.get`方法发送一个GET请求到`https://www.example.com/data`。在请求成功后，通过`response.data`访问服务器返回的数据。如果请求失败，将会捕获到`catch`块中的错误并进行处理。 同时，您也可以传入响应头等进行自定义配置请求。
+
+### ir.post(url[, data[, config]])
+
+**功能介绍**
+
+该接口将发送`POST`网络请求并返回一个`Promise`对象。
+
+**接口定义**
+
+```typescript
+ir.post(url: string, data?: any, config?: IrRequestConfig): Promise>;
+```
+
+**示例**
+
+```typescript
+// 使用默认配置发送POST请求
+ir.post('https://www.example.com/data', {
+ name: 'Xiao Ming',
+ age: 18
+})
+ .then(response => {
+ // 请求成功，处理响应数据
+ })
+ .catch(error => {
+ // 请求失败，处理错误
+ });
+
+// 使用自定义配置发送POST请求
+ir.post('https://www.example.com/data', {
+ name: 'Xiao Ming',
+ age: 18
+}, {
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': 'your-token'
+ }
+})
+ .then(response => {
+ // 处理响应数据
+ })
+ .catch(error => {
+ // 处理错误
+ });
+```
+
+上述示例中，通过`ir.post`方法发送一个POST请求到`https://www.example.com/data`，并传递了一个包含`name`和`age`字段的数据对象。在请求成功后，通过`response.data`访问服务器返回的数据。如果请求失败，将会捕获到`catch`块中的错误并进行处理。 同时，您也可以传入响应头等进行自定义配置请求。
+
+### ir.delete(url[, config])
+
+**功能介绍**
+
+该接口将发送`DELETE`网络请求删除`url`上的资源，并返回一个`Promise`对象。
+
+**接口定义**
+
+```typescript
+ir.delete(url: string, config?: IrRequestConfig): Promise>;
+```
+
+**示例**
+
+```typescript
+// 使用默认配置发送DELETE请求
+ir.delete('https://www.example.com/data/123')
+ .then(response => {
+ // 删除成功
+ })
+ .catch(error => {
+ // 删除失败
+ });
+
+// 使用自定义配置发送DELETE请求
+ir.delete('https://api.example.com/data/123', {
+ params: {
+ force: true
+ },
+ headers: {
+ 'X-Requested-With': 'XMLHttpRequest',
+ 'Authorization': 'your-token'
+ }
+})
+ .then(response => {
+ // 删除成功
+ })
+ .catch(error => {
+ // 删除失败
+ });
+```
+
+上述示例中，通过`ir.delete`方法发送一个DELETE请求删除`https://www.example.com/data/123`上的资源。在请求成功后，服务器成功删除`URL`上的资源。如果请求失败，将会捕获到`catch`块中的错误并进行处理。 同时，您也可以传入响应头等进行自定义配置请求。
+
+### ir.head(url[, config])
+
+**功能介绍**
+
+该接口将发送`HEAD`网络请求并返回一个`Promise`对象。HEAD请求方法与GET方法类似，但是服务器不会返回实际内容。它仅返回响应头，包括状态码、响应日期、服务器信息以及其他元数据 。
+
+**接口定义**
+
+```typescript
+ir.head(url: string, config?: IrRequestConfig): Promise>;
+```
+
+**示例**
+
+```typescript
+// 使用默认配置发送HEAD请求
+ir.head('https://api.example.com/data')
+ .then(response => {
+ // 请求成功，处理响应头等信息
+ })
+ .catch(error => {
+ // 请求失败，处理错误
+ });
+
+// 使用自定义配置发送HEAD请求
+ir.head('https://api.example.com/data', {
+ headers: {
+ 'X-Requested-With': 'XMLHttpRequest',
+ 'Authorization': 'your-token'
+ }
+})
+ .then(response => {
+ // 处理响应头等信息
+ })
+ .catch(error => {
+ // 请求失败，处理错误
+ });
+```
+
+上述示例中，通过`ir.head`方法发送一个HEAD请求到`https://api.example.com/data`。在请求成功后，可以通过`response.headers`访问服务器返回的头信息等。如果请求失败，将会捕获到`catch`块中的错误并进行处理。 同时，您也可以传入响应头等进行自定义配置请求。
+
+### ir.options(url[, config])
+
+**功能介绍**
+
+该接口将发送`OPTIONS`网络请求目标资源所支持的请求方法、请求头等信息 ，并返回一个`Promise`对象。
+
+**接口定义**
+
+```typescript
+ir.options(url: string, config?: IrRequestConfig): Promise>;
+```
+
+**示例**
+
+```typescript
+// 使用默认配置发送OPTIONS请求
+ir.options('https://www.example.com/data')
+ .then(response => {
+ // 请求成功，处理响应
+ })
+ .catch(error => {
+ // 请求失败，处理错误
+ });
+
+// 使用自定义配置发送OPTIONS请求
+ir.options('https://api.example.com/data', {
+ headers: {
+ 'X-Requested-With': 'XMLHttpRequest',
+ 'Authorization': 'your-token'
+ }
+})
+ .then(response => {
+ // 请求成功，处理响应
+ })
+ .catch(error => {
+ // 请求失败，处理错误
+ });
+```
+
+上述示例中，通过`ir.options`方法发送一个OPTIONS请求到`https://api.example.com/data`。在请求成功后，获取访问服务器支持的请求方法、请求头等信息。如果请求失败，将会捕获到`catch`块中的错误并进行处理。 同时，您也可以传入响应头等进行自定义配置请求。
+
+### ir.put(url[, data[, config]])
+
+**功能介绍**
+
+该接口将发送`PUT`网络请求更新或替换现有资源 ，并返回一个`Promise`对象。
+
+**接口定义**
+
+```typescript
+ir.put(url: string, data?: any, config?: IrRequestConfig): Promise>;
+```
+
+**示例**
+
+```typescript
+// 使用默认配置发送PUT请求
+ir.put('https://api.example.com/data/123', {
+ name: 'Xiao Ming',
+ age: 18
+})
+ .then(response => {
+ // 请求成功，处理响应
+ })
+ .catch(error => {
+ // 请求失败，处理错误
+ });
+
+// 使用自定义配置发送PUT请求
+ir.put('https://api.example.com/data/123', {
+ name: 'Xiao Ming',
+ age: 18
+}, {
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': 'your-token'
+ }
+})
+ .then(response => {
+ // 请求成功，处理响应
+ })
+ .catch(error => {
+ // 请求失败，处理错误
+ });
+```
+
+上述示例中，通过`ir.put`方法发送一个PUT请求到`https://api.example.com/data/123`，并传递了一个包含`name`和`age`字段的数据对象去更新服务端数据。在请求成功后，说明成功更新了服务端数据。如果请求失败，将会捕获到`catch`块中的错误并进行处理。同时，您也可以传入响应头等进行自定义配置请求。
+
+### ir.patch(url[, data[, config]])
+
+**功能介绍**
+
+该接口将发送`PATCH`网络请求更新服务器上现有资源 ，并返回一个`Promise`对象。与 `PUT` 请求不同，`PATCH` 请求是对已存在的资源进行部分更新。它允许客户端发送仅包含要更新的资源的部分数据，而不需要发送整个资源的副本。
+
+**接口定义**
+
+```typescript
+ir.patch(url: string, data?: any, config?: IrRequestConfig): Promise>;
+```
+
+**示例**
+
+```typescript
+// 使用默认配置发送PATCH请求
+ir.patch('https://api.example.com/data/123', {
+ name: 'Xiao Ming',
+ age: 18
+})
+ .then(response => {
+ // 请求成功，处理响应数据
+ })
+ .catch(error => {
+ // 请求失败，处理错误
+ });
+
+// 使用自定义配置发送PATCH请求
+ir.patch('https://api.example.com/data/123', {
+ name: 'Xiao Ming',
+ age: 18
+}, {
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': 'your-token'
+ }
+})
+ .then(response => {
+ // 请求成功，处理响应数据
+ })
+ .catch(error => {
+ // 请求失败，处理错误
+ });
+```
+
+上述示例中，通过`ir.patch`方法发送一个PATCH请求到`https://api.example.com/data/123`，并传递了一个包含`name`和`age`字段的数据对象。在请求成功后，说明服务端成功更新了所传入的字段值。如果请求失败，将会捕获到`catch`块中的错误并进行处理。 同时，您也可以传入响应头等进行自定义配置请求。
+
+### ir.all(iterable)
+
+**功能介绍**
+
+该接口是`inula-request`请求组件中的一个静态方法，用于同时发送多个并发请求。它接收一个可迭代对象`iterable`作为参数，该可迭代对象包含多个`ir`请求实例，方法返回一个Promise对象 。
+
+**接口定义**
+
+```typescript
+ir.all(promises: Array>): Promise>;
+```
+
+**示例**
+
+```typescript
+// 创建多个 ir 请求实例
+const request1 = ir.get('https://www.example.com/data1');
+const request2 = ir.get('https://www.example.com/data2');
+const request3 = ir.get('https://www.example.com/data3');
+
+// 发送并发请求
+ir.all([request1, request2, request3])
+ .then(responseArray => {
+ // 请求成功，处理每个请求的响应数据
+ responseArray.forEach(response => {
+ console.log(response.data);
+ });
+ })
+ .catch(error => {
+ // 请求失败，处理错误
+ });
+```
+
+上述示例中，通过`ir.get`方法创建了三个`ir`请求实例，并将它们放入一个数组中。然后，将这个数组作为参数传递给`ir.all`方法，以同时发送这三个请求。在所有请求成功完成后，通过`responseArray`参数获取每个请求的响应数据，并进行处理。
+
+### ir.spread(callback)
+
+**功能介绍**
+
+该接口是`inula-request`库中的一个静态方法，用于将多个并发请求的响应数据传递给回调函数进行处理。通常配合`ir.all(iterable)`接口同时使用。
+
+**接口定义**
+
+```typescript
+ir.spread(callback: Callback): (arr: any[]) => T;
+```
+
+**示例**
+
+```typescript
+// 创建多个 ir 请求实例
+const request1 = ir.get('https://www.example.com/data1');
+const request2 = ir.get('https://www.example.com/data2');
+const request3 = ir.get('https://www.example.com/data3');
+
+// 发送并发请求
+ir.all([request1, request2, request3])
+ .then(ir.spread((response1, response2, response3) => {
+ // 请求成功，处理每个请求的响应数据
+ console.log(response1.data);
+ console.log(response2.data);
+ console.log(response3.data);
+ }))
+ .catch(error => {
+ // 请求失败，处理错误
+ });
+```
+
+上述示例中，通过`ir.get`方法创建了三个`ir`请求实例，并将它们放入一个数组中。然后，使用`ir.all`方法将这个数组作为参数传递给`ir.all`方法，以同时发送这三个请求。在`then`回调中，通过`ir.spread`方法将多个请求的响应数据传递给回调函数进行处理。在回调函数中，可以通过多个参数（`response1`、`response2`、`response3`）访问每个请求的响应数据。
+
+### ir.create([config])
+
+**功能介绍**
+
+该接口是`inula-request`请求组件中的一个静态方法，用于创建一个独立的 ir 实例 。
+
+**接口定义**
+
+```typescript
+ir.create(config?: IrRequestConfig):IrInstance;
+```
+
+其中`ir`实例类型`IrInstance`定义如下：
+
+```typescript
+// Ir 类接口类型
+interface IrInterface {
+ request(url: string | Record, config?: IrRequestConfig): Promise>;
+
+ get(url: string, config?: IrRequestConfig): Promise>;
+
+ post(url: string, data?: any, config?: IrRequestConfig): Promise>;
+
+ put(url: string, data?: any, config?: IrRequestConfig): Promise>;
+
+ delete(url: string, config?: IrRequestConfig): Promise>;
+
+ head(url: string, config?: IrRequestConfig): Promise>;
+
+ options(url: string, config?: IrRequestConfig): Promise>;
+}
+
+// Ir 实例接口类型
+interface IrInstance extends IrInterface {
+ // Ir 类
+ InulaRequest: IrInterface;
+
+ // 创建 Ir 实例
+ create: (config?: IrRequestConfig) => IrInstance;
+
+ // 使用内置的配置初始化实例属性
+ defaults: IrRequestConfig;
+
+ // 取消当前正在进行的请求
+ CancelToken: CancelTokenStatic;
+
+ // 判断是否请求取消
+ isCancel: (value: any) => boolean;
+
+ // CanceledError的别名，用于向后兼容
+ Cancel: typeof CanceledError;
+
+ // 实例拦截请求
+ interceptors: Interceptors;
+
+ // 并发发送多个 HTTP 请求
+ all(promises: Array>): Promise>;
+
+ // 封装多个 Promise 至数组，便于作为 all 传入参数
+ spread: (callback: Callback) => (arr: any[]) => T;
+
+ // InulaRequest 对象的默认实例
+ default: IrInstance;
+
+ CanceledError: typeof CancelError;
+
+ // IrError 错误
+ IrError: typeof IrError;
+
+ // 判断输入值是否为 IrError
+ isIrError: (avl: any) => boolean;
+
+ // IrHeaders 响应头
+ IrHeaders: typeof IrHeaders;
+
+ useIR: (url: string, config?: IrRequestConfig, options?: QueryOptions) => { data?: T; error?: any };
+}
+```
+
+**示例**
+
+```typescript
+// 创建一个独立的 ir 实例
+const instance = ir.create({
+ baseURL: 'https://www.example.com',
+ timeout: 5000,
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': 'your-token'
+ }
+});
+
+// 使用独立实例发送请求
+instance.get('/data')
+ .then(response => {
+ // 请求成功，处理响应数据
+ })
+ .catch(error => {
+ // 请求失败，处理错误
+ });
+```
+
+上述示例中，使用`ir.create`方法创建了一个名为`instance`的独立`ir`实例。通过传递一个配置对象给`ir.create`方法，指定了实例的默认配置，包括基础`URL`、超时时间和请求头。然后，使用`instance`实例发送GET请求到`https://www.example.com/data`。在请求成功后，通过`response.data`访问服务器返回的数据。如果请求失败，将会捕获到`catch`块中的错误并进行处理。
+
+## inula-request 实例 API
+
+通过`ir.create`方法可以创建一个独立的`ir`实例，您可以更改该实例的默认配置以便在同类场景中发送同类配置的网络请求，您可以创建多个实例以满足多场景下同类请求的发送。
+
+方便起见，以下`ir`实例统一使用`instance`代替，实例对象上同样可以进行`request`、`get`、`post`、`delete`、`head`、`options`、`put`及`patch`请求的发送，其接口类型和使用方法与第一章节中各类请求方式一致。
+
+```typescript
+// 创建一个默认配置的 ir 实例
+const instance = ir.create();
+
+// 实例对象上请求方法接口类型
+instance.get(url: string, config?: IrRequestConfig): Promise>;
+
+instance.get(url: string, config?: IrRequestConfig): Promise>;
+
+instance.post(url: string, data?: any, config?: IrRequestConfig): Promise>;
+
+instance.delete(url: string, config?: IrRequestConfig): Promise>;
+
+instance.head(url: string, config?: IrRequestConfig): Promise>;
+
+instance.options(url: string, config?: IrRequestConfig): Promise>;
+
+instance.put(url: string, data?: any, config?: IrRequestConfig): Promise>;
+
+instance.patch(url: string, data?: any, config?: IrRequestConfig): Promise>;
+```
+
+## 请求配置全量参数
+
+### 请求配置参数使用
+
+**功能介绍**
+
+`inula-request`请求组件可以通过传入请求配置参数`config`自定义网络请求的行为，以便满足您在不同场景下的请求需求。
+
+**接口定义**
+
+```typescript
+// 请求配置
+interface IrRequestConfig {
+ url?: string;
+
+ method?: Method;
+
+ // 公共URL前缀
+ baseURL?: string;
+
+ headers?: Record;
+
+ params?: Record | null;
+
+ data?: any;
+
+ timeout?: number;
+
+ // 超时错误消息
+ timeoutErrorMessage?: string;
+
+ // 是否发送凭据
+ withCredentials?: boolean;
+
+ // 响应类型
+ responseType?: ResponseType;
+
+ // 上传进度事件回调
+ onUploadProgress?: (progressEvent: any) => void;
+
+ // 下载进度事件回调
+ onDownloadProgress?: (progressEvent: any) => void;
+
+ // 请求取消令牌
+ cancelToken?: CancelToken;
+
+ signal?: AbortSignal;
+
+ // 过渡选项
+ transitional?: TransitionalOptions;
+}
+```
+
+### url
+
+**参数说明**
+
+该参数为请求的`URL`地址，类型为`string`。 该参数可以通过请求方法的第一个参数传入，也可以通过`config`配置对象的`url`字段传入。
+
+**示例**
+
+```typescript
+ir({
+ url: 'https://www.example.com'
+})
+```
+
+### method
+
+**参数说明**
+
+该参数为请求的`HTTP`方法。该参数在使用特定的请求方法时无需传入，在使用通用请求方法时通过`config`配置对象的`method`字段传入。 其类型定义如下：
+
+```typescript
+type Method = 'get' | 'GET' | 'delete' | 'DELETE' | 'head' | 'HEAD' | 'options' | 'OPTIONS' | 'post' | 'POST' | 'put' | 'PUT' | 'patch' | 'PATCH';
+```
+
+**示例**
+
+```typescript
+ir('https://www.example.com', {
+ method: 'GET'
+})
+```
+
+### baseURL
+
+**参数说明**
+
+该参数为请求的公共 `URL` 前缀，类型为 `string`。该参数会自动拼接在传入的 `URL` 之前，通常配合实例化请求使用，提供公共场景下的便利请求方式。
+
+**示例**
+
+```typescript
+ir.get('/data', {
+ baseURL: 'https://www.example.com'
+})
+```
+
+### headers
+
+**参数说明**
+
+该参数为请求的自定义头信息，类型为`Record`。您可以根据自身需求在`config`中配置请求头信息，以满足不同场景的请求需求。
+
+**示例**
+
+```typescript
+ir.get('https://www.example.com', {
+ headers: {
+ 'Content-Type': 'application/json'
+ }
+})
+```
+
+### params
+
+**参数说明**
+
+该参数为请求`URL`中的参数，类型为`Record`。该参数可以通过URL请求参数传入或通过`config`配置的`params`参数传入进而自动拼接到`URL`中。
+
+**示例**
+
+```typescript
+ir.get('https://www.example.com', {
+ params: {
+ id: 123,
+ limit: 10,
+ }
+})
+```
+
+### data
+
+**参数说明**
+
+该参数为请求的数据体，类型为任意值。该参数为`POST`、 `PUT` 及 `PATCH` 请求所需要携带的数据，可以通过这些请求的第二个参数传入，也可以通过`config`配置的 `data` 字段传入。
+
+**示例**
+
+```typescript
+ir.post('https://www.example.com/data', {
+ data: {
+ name: 'Xiao Ming',
+ age: 18,
+ }
+})
+```
+
+### timeout
+
+**参数说明**
+
+该参数为请求的超时时间（以毫秒为单位），类型为`number`。 请求过程中超过该配置时间，`inula-request`请求组件会自动中断请求并发送请求超时的错误消息。
+
+**示例**
+
+```typescript
+ir.get('https://www.example.com', {
+ timeout: 5000
+})
+```
+
+### timeoutErrorMessage
+
+**参数说明**
+
+该参数为请求超时时的错误消息，类型为`string`，该参数需配合`timeout`参数同时使用 。
+
+**示例**
+
+```typescript
+ir.get('https://www.example.com', {
+ timeout: 5000,
+ timeoutErrorMessage: '请求超时，请重试。',
+})
+```
+
+### withCredentials
+
+**参数说明**
+
+该参数控制是否在跨域请求时包含凭据信息（如果存在），类型为`boolean`。默认情况下，该值为`false`，浏览器不会在跨域请求中发送凭据 。
+
+**示例**
+
+```typescript
+ir.get('https://www.example.com', {
+ withCredentials: true
+})
+```
+
+### responseType
+
+**参数说明**
+
+该参数用于设置请求的响应类型，其类型定义如下：
+
+```typescript
+type ResponseType = 'text' | 'json' | 'blob' | 'arraybuffer';
+```
+
+**示例**
+
+```typescript
+ir.get('https://www.example.com', {
+ responseType: 'json'
+})
+```
+
+### onUploadProgress
+
+**参数说明**
+
+该参数用于设置上传进度事件回调函数。 配置该参数后`inula-request`请求组件将自动检测上传进度，并将进度信息作为参数传递给`onUploadProgress`回调函数。这个参数可以帮助您在UI中显示进度条或其他形式的进度指示器，以使用户能够了解文件上传的进展情况。
+
+**示例**
+
+```typescript
+ir.post('https://www.example.com/upload', formData, {
+ onUploadProgress: function(progressEvent) {
+ // 计算上传进度的百分比
+ const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+
+ // 更新用户界面上的进度条等元素
+ console.log('上传进度：' + percentCompleted + '%');
+ }
+})
+```
+
+### onDownloadProgress
+
+**参数说明**
+
+该参数用于设置下载进度事件回调函数。 配置该参数后`inula-request`请求组件将自动检测下载进度，并将进度信息作为参数传递给`onDownloadProgress`回调函数。这个参数可以帮助您在 UI 中显示进度条或其他形式的进度指示器，以使用户能够了解文件下载的进展情况。
+
+**示例**
+
+```typescript
+ir.get('https://www.example.com/download', {
+ onDownloadProgress: function(progressEvent) {
+ // 计算下载进度的百分比
+ var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+
+ // 更新用户界面上的进度条等元素
+ console.log('下载进度：' + percentCompleted + '%');
+ }
+})
+```
+
+### cancelToken(不推荐)
+
+**参数说明**
+
+该参数用于取消请求操作，它是一个特殊的标记对象，允许您在发送请求之前或请求过程中取消该请求。使用 `cancelToken` 参数可以避免不必要的网络请求，尤其是当您发送多个并发请求时。如果你想在某个请求完成之前取消其中一个或全部请求，便可以使用 `cancelToken`。
+
+**示例**
+
+```typescript
+// 首先创建一个 cancelToken 对象
+const CancelToken = ir.CancelToken;
+const source = CancelToken.source();
+
+// 将 cancelToken 对象作为配置对象的属性传递给请求组件
+ir.get('https://www.example.com/data', {
+ cancelToken: source.token
+})
+
+// 在某个时刻您需要取消请求则调用 cancel() 方法
+source.cancel('请求被取消');
+```
+
+### signal(推荐)
+
+**参数说明**
+
+该参数用于设置一个 `AbortSignal` 对象，用于取消正在进行的请求。`AbortSignal` 是 Web API 的一部分，在现代浏览器中提供了一种用于取消网络请求的机制。
+
+**示例**
+
+```typescript
+// 创建一个 AbortController 对象和对应的 AbortSignal
+const controller = new AbortController();
+const signal = controller.signal;
+
+// 发起请求并传入 signal 参数
+ir.get('https://www.example.com/data', { signal })
+ .then(response => {
+ // 请求成功处理逻辑
+ })
+ .catch(error => {
+ if (ir.isCancel(error)) {
+ console.log('请求已取消', error.message);
+ } else {
+ console.log('请求发生错误', error.message);
+ }
+ });
+
+// 在某个时刻您需要取消请求则调用 abort() 方法
+controller.abort();
+```
+
+### transitional
+
+**参数说明**
+
+该参数可以用来定义一些转换规则，其接口类型定义如下：
+
+```typescript
+interface TransitionalOptions {
+ // 是否忽略 JSON parse 的错误配置
+ silentJSONParsing?: boolean;
+
+ // 强制解析为 JSON 格式
+ forcedJSONParsing?: boolean;
+
+ // 请求超时异常错误配置
+ clarifyTimeoutError?: boolean;
+}
+```
+
+- `silentJSONParsing`：用于配置解析 `JSON` 时是否静默处理错误，默认为`true`。配置为`true`时，如果发生 `JSON` 解析错误，将不会抛出异常，而是返回解析前的原始数据。
+- `forcedJSONParsing`：用于控制是否强制解析 `JSON` 数据，默认为`true`。配置为`true`时，无论数据的 `MIME` 类型（如`text/plain`）是什么，都会尝试将其解析为 `JSON`。
+- `clarifyTimeoutError`：用于控制是否在超时错误中提供更明确的错误信息，默认为`false`。配置为`true`时，将提供更具体的错误消息，指示发生的超时错误类型。
+
+**示例**
+
+```typescript
+ir.get('https://www.example.com', {
+ transitional: {
+ silentJSONParsing: true,
+ forcedJSONParsing: false,
+ clarifyTimeoutError: false,
+ }
+})
+```
+
+## 拦截器 API
+
+`inula-request`请求组件的拦截器有两种类型：请求拦截器和响应拦截器。
+
+### 请求拦截器
+
+**功能介绍**
+
+请求拦截器允许您在发送请求之前对其进行修改或添加特定配置。通过请求拦截器，您可以执行以下操作（任意一项/几项/其他操作）：
+
+> - 修改请求头信息，例如添加身份验证令牌。
+> - 在每个请求中添加通用参数。
+> - 对请求体进行转换。
+> - 拦截请求错误并进行相应处理。
+> - ...
+
+**接口定义**
+
+```typescript
+ir.interceptors.request.use(
+ fulfilled?: FulfilledFn,
+ rejected?: RejectedFn,
+ options?: { synchronous?: boolean; runWhen?: (value: IrRequestConfig) => boolean }
+): number;
+
+type FulfilledFn = (value: T) => T | Promise;
+type RejectedFn = (error: any) => any;
+```
+
+- `fulfilled`：为请求成功的回调函数，在请求成功时被调用。它接收一个参数类型为 `IrRequestConfig`的配置`config`，表示已经发送请求的配置。
+- `rejected`：为请求失败的回调函数，用于处理请求失败的情况 。
+- `options` ：为拦截器的配置参数，用于配置拦截器的行为 。其中`synchronous` 为一个布尔值，指示是否同步地运行拦截器 ；
+- `runWhen` 用于确定是否应该运行拦截器，返回值为一个数字 ，表示拦截器的唯一标识符，这个标识符可以用于后续操作，如移除拦截器。
+
+**示例**
+
+```typescript
+// 定义一个成功回调函数
+const fulfilledCallback = (config) => {
+ // 修改请求配置或添加通用参数
+ config.headers.Authorization = 'new token';
+ return config;
+};
+
+// 定义一个拒绝回调函数
+const rejectedCallback = (error) => {
+ console.error('请求失败！', error);
+ return Promise.reject(error);
+};
+
+// 定义拦截器选项
+const options = {
+ synchronous: true, // 选择同步执行拦截器，默认为异步执行
+ runWhen: (config) => config.method === 'GET', // 只在请求方法为GET时运行拦截器
+};
+
+// 注册拦截器
+const interceptorId = ir.interceptors.request.use(
+ fulfilledCallback,
+ rejectedCallback,
+ options，
+);
+
+// 发起请求
+ir.get('https://www.example.com')
+ .then((response) => {
+ console.log('响应数据：', response.data);
+ })
+ .catch((error) => {
+ console.error('请求出错！', error);
+ });
+
+// 取消拦截器
+ir.interceptors.request.eject(interceptorId);
+```
+
+在上面示例中，定义了一个成功的回调函数和一个拒绝的回调函数，并配置了 `synchronous` 为 `true` 同步执行拦截器，配置了 `runWhen` 只有在请求方法为 `GET` 时才运行拦截器。将请求拦截器参数传入拦截器接口中，会返回一个拦截器 `id` ，可以用于后续注销。配置拦截器后正常发送请求，在请求发送到服务端之前会进入请求拦截器逻辑，您可以通过请求拦截器更加个性化定制您的请求。
+
+### 响应拦截器
+
+**功能介绍**
+
+请求拦截器允许您在发送请求之前对其进行修改或添加特定配置。通过请求拦截器，您可以执行以下操作（任意一项/几项/其他操作）：
+
+- 修改响应头。
+- 在每个响应体添加额外内容。
+- 对响应体进行转换。
+- 拦截错误响应，并进行相应处理。
+- ...
+
+**接口定义**
+
+```typescript
+ir.interceptors.response.use(
+ fulfilled?: FulfilledFn>,
+ rejected?: RejectedFn,
+ options?: { synchronous?: boolean; runWhen?: (value: IrResponse) => boolean }
+): number;
+
+type FulfilledFn = (value: T) => T | Promise;
+type RejectedFn = (error: any) => any;
+```
+
+- `fulfilled`：为请求成功的回调函数，在请求成功时被调用。它接收一个参数类型为 `IrResponse`的请求响应`response`，表示获取的请求响应。
+- `rejected`：为请求失败的回调函数，用于处理请求失败的情况 。
+- `options` ：为拦截器的配置参数，用于配置拦截器的行为 。其中`synchronous` 为一个布尔值，指示是否同步地运行拦截器 ；
+- `runWhen` 用于确定是否应该运行拦截器，返回值为一个数字 ，表示拦截器的唯一标识符，这个标识符可以用于后续操作，如移除拦截器。
+
+**示例**
+
+```typescript
+// 定义成功处理函数
+const fulfilledCallback = (response) => {
+ // 修改响应内容
+ response.status = 404;
+ return response;
+};
+
+// 定义失败处理函数
+const rejectedCallback = (error) => {
+ console.error('请求失败:', error);
+ return Promise.reject(error);
+};
+
+// 定义拦截器选项
+const options = {
+ synchronous: true, // 选择同步执行拦截器，默认为异步执行
+ runWhen: (config) => config.method === 'GET', // 只在请求方法为GET时运行拦截器
+};
+
+// 使用ir.interceptors.response.use方法
+const interceptorId = ir.interceptors.response.use(
+ fulfilledHandler,
+ rejectedHandler,
+ options，
+);
+
+// 发起请求
+ir.get('https://www.example.com')
+ .then((response) => {
+ console.log('请求结果:', response);
+ })
+ .catch((error) => {
+ console.error('请求错误:', error);
+ });
+
+// 取消拦截器
+ir.interceptors.response.eject(interceptorId);
+```
+
+在上面示例中，定义了一个成功的回调函数和一个拒绝的回调函数，并配置了 `synchronous` 为 `true` 同步执行拦截器，配置了 `runWhen` 只有在请求方法为 `GET` 时才运行拦截器。将响应拦截器参数传入拦截器接口中，会返回一个拦截器 `id`，可以用于后续注销。配置拦截器后正常发送请求，在请求被服务端响应后会进入响应拦截器逻辑，您可以通过响应拦截器更加个性化定制您的请求。
+
+## 请求错误
+
+**功能介绍**
+
+`inula-request`请求组件提供了`IrError`类用于实例化请求错误对象，其包含了与请求相关的详细信息，以帮助开发者识别和处理错误。
+
+**接口定义**
+
+```typescript
+class IrError extends Error implements IrErrorInterface;
+
+interface IrErrorInterface {
+ // 产生错误的请求配置对象
+ config?: IrRequestConfig;
+ // 表示请求错误的字符串代码。例如，"ECONNABORTED"表示连接被中止。
+ code?: string;
+ // 产生错误的原始请求实例。
+ request?: IrInstance;
+ // 包含错误响应的响应实例。如果请求成功完成，但服务器返回错误状态码（例如404或500），则此属性存在。
+ response?: IrResponse;
+}
+```
+
+**示例**
+
+```typescript
+ir.get('https://www.example.com/users')
+ .then(response => {
+ // 处理成功响应
+ console.log(response.data);
+ })
+ .catch((error: IrError) => {
+ if (error.response) {
+ // 请求已发出，但服务器响应状态码不在 2xx 范围内
+ console.log(error.response.data);
+ console.log(error.response.status);
+ console.log(error.response.headers);
+ } else if (error.request) {
+ // 请求已发出，但没有收到响应
+ console.log(error.request);
+ } else {
+ // 在设置请求时触发错误，或者发生了一些其他错误
+ console.log('Error', error.message);
+ }
+ console.log(error.config);
+ });
+```
+
+- 在上面的示例中，使用ir发送一个GET请求到`https://www.example.com/users`。如果请求成功，打印出返回的数据；如果请求失败，捕获`IrError`并根据错误的类型进行处理。
+- 在`catch`块中，可以通过`error.response`访问到服务器返回的响应信息。如果`error.response`存在，则意味着服务器有响应，但状态码不在2xx范围内。可以访问`error.response.data`获取服务器返回的数据，`error.response.status`获取状态码，以及`error.response.headers`获取响应头信息。
+- 如果`error.response`不存在，而`error.request`存在，则表示请求已发送但未收到响应。在这种情况下，可以直接访问`error.request`获取请求对象。
+- 如果以上两种情况都不满足，说明在设置请求时出现了错误，或者其他一些未知的错误，可以通过`error.message`打印错误信息。
+
+## 请求取消
+
+在`inula-request`请求组件中，提供两种取消请求方式：`cancelToken`和`AbortController`。其中`cancelToken`的方式已过时，推荐使用`AbortController`的取消请求方式。具体使用方式参见 [cancelToken (不推荐)](#cancelToken(不推荐)) 和 [signal（推荐）](#signal(推荐))章节。
+
+## 请求实时刷新 API
+
+**功能介绍**
+
+`inula-request`请求组件提供支持动态轮询的实时数据刷新能力，帮助您在使用`openinula`框架进行页面开发时拥有更加便捷的请求体验！
+
+**接口定义**
+
+```typescript
+ir.useIR: (url: string, config?: IrRequestConfig, options?: QueryOptions) => {data?: T, error?: any}
+
+// 轮询查询配置 轮询间隔（毫秒）
+interface QueryOptions {
+ pollingInterval?: number;
+ // 是否启用动态轮询策略
+ enablePollingOptimization?: boolean;
+ // 配置动态轮询策略后生效
+ limitation?: Limitation;
+ // 动态轮询策略分析历史查询容量，默认100
+ capacity?: number;
+ // 动态轮询策略窗口大小，默认5
+ windowSize?: number;
+}
+
+interface Limitation {
+ minInterval: number,
+ maxInterval: number,
+}
+```
+
+`url`和`config`参数和`inula-request`请求组件接口参数一致，用于配置网络请求。
+
+`options`参数为动态轮询配置参数，其中：
+
+- 配置`pollingInterval`参数后将开启实时数据刷新功能，`inula-request`请求组件会根据`pollingInterval`的间隔轮询请求服务端，当请求的服务端数据发生改变时会通知组件拿到最新数据并重新渲染；
+- `enablePollingOptimization`参数用于开启动态轮询策略，该参数配置为`true`时，会启动动态轮询策略，`inula-request`请求组件将分析历史请求数据，动态更新轮询间隔（若服务器数据变化频繁则会缩短轮询间隔时间，反之增加轮询间隔时间，最大保证用户体验一致性的同时减缓服务器压力），动态轮询间隔会有一个默认的最大间隔时间`60000ms`和最小间隔时间`100ms`；
+- 您也可以通过`limitation`中的`maxInterval`参数来配置最大间隔时间，`minInterval`参数配置最小间隔时间；
+- 您也可以自定义动态轮询策略的配置参数，通过`capacity`参数来设置分析的历史数据容量，组件内部会通过您设置的数据容量分析数据更新的间隔趋势，以更新当前的轮询时间。通过`windowSize`设置动态轮询策略滑动窗口大小，该参数用于帮助用户更加细粒度控制分析数据变化趋势的梯度范围，以提供更加精准的轮询间隔设置。
+
+通过以上参数，您可以更加灵活的配置实时数据刷新特性以满足您在不同场景下的使用需求。
+
+**示例**
+
+```typescript
+import { useIR } from 'inula-request';
+
+const App = () => {
+ const options = {
+ pollingInterval: 3000,
+ enablePollingOptimization: true,
+ limitation: {minInterval: 500, maxInterval: 4000}
+ };
+ const { data, error } = useIR('https://www.example.com', null, options);
+
+ return (
+
+
{error ? error.message : data }
+
Home page
} />
+ About Page
} />
+
+
+ );
+}
+```
+
+
+
+### HashRouter
+
+**功能介绍**
+
+使用`HashRouter`组件包裹整个应用，它提供一个`history`对象来管理浏览器的历史记录，`HashRouter`使用`URL`的`hash`值来实现路由，会在`URL`中显示`#`符号。
+
+**接口定义**
+
+```tsx
+type HashRouterProps = {
+ basename: string;
+ getUserConfirmation: (message: string, callBack: (isJump: boolean) => void) => void;
+ children?: InualNode;
+ hashType: urlHashType;
+};
+```
+
+
+
+- `basename`：一个字符串，用于指定路由的根路径。如`/app`，这样所有的网页都会以`/app`开头，比如`/app/home`、`/app/user`等。
+- `getUserConfirmation`：一个函数，作用是自定义用户在导航到新的历史记录条目时的确认提示。它接受两个参数：message 和 callback。message 是一个字符串，表示要显示给用户的提示信息。callback 是一个函数，它接受一个布尔值作为参数，表示用户是否确认导航。默认使用函数`callBack(window.confirm(message))`。
+- `hashType`：`window.location.hash` 使用的编码类型。可用值为“slash“和”noslash”，默认为“slash”。
+ - `slash`：创建如#/api/web的hash值。
+ - `noslash`：创建如#api/web的hash值。
+
+> 说明：
+> `HashRouter`使用`URL`的`hash`来表示路由，不使用`history API`，因此不支持在`history.push`，`history.replace`中传递state。
+
+**示例**
+
+```tsx
+import { HashRouter, Link, Route, Switch } from 'inula-router';
+
+function App() {
+ return (
+
+ Home
+ About
+
+ Home page
} />
+ About Page
} />
+
+
+ );
+}
+```
+
+
+
+### Switch
+
+**功能介绍**
+
+`Switch`用于包裹多个`Route`或`Redirect`，并根据当前的`URL`匹配第一个合适的组件进行渲染。
+
+**接口定义**
+
+```tsx
+type SwitchProps = {
+ location?: Location;
+ children?: Inula.InualNode;
+};
+```
+
+
+
+- `location`：指定匹配子元素时的位置(默认为浏览器当前的URL)。
+
+> 说明：
+> 所有的Route组件和Redirect组件都应该被Switch组件包裹，Switch会遍历所有的子元素，第一个匹配成功的Route组件会被渲染，其他的会被忽略。
+
+**示例**
+
+```tsx
+import { BrowserRouter, Link, Route, Switch } from 'inula-router';
+
+// 定义一些页面组件
+const Home = () => Home Page
;
+const About = () => About Page
;
+const Contact = () => Contact Page
;
+const NotFound = () => 404 Not Found
;
+
+// 定义一个 App 组件，使用 BrowserRouter 和 Switch 来创建路由
+const App = () => {
+ return (
+
+
+ Home
+ About
+ Contact
+ {/* 使用 Switch 来渲染匹配到的第一个子路由 */}
+
+ {/* 使用 exact 属性来确保只有当 URL 完全匹配时才渲染组件 */}
+
+
+
+ {/* 使用 * 来匹配上述以外的 URL，渲染 NotFound 组件 */}
+
+
+
+
+ );
+};
+```
+
+
+
+### Route
+
+**功能介绍**
+
+`Route`是一个定义了路径和组件的映射关系的组件，其基本功能是当路径与当前URL匹配时呈现对应组件。
+
+**接口定义**
+
+```tsx
+type RouteProps = {}, Path extends string = string> = {
+ location?: Location;
+ component?: Inula.ComponentType> | Inula.ComponentType | undefined;
+ children?: ((props: RouteChildrenProps) => Inula.InulaNode) | Inual.InulaNode;
+ render?: (props: RouteComponentProps
) => Inula.InulaNode;
+ path?: Path | Path[];
+ exact?: boolean;
+ sensitive?: boolean;
+ strict?: boolean;
+};
+```
+
+
+
+- `location`：指定匹配子元素时的位置(默认为浏览器当前的URL)。
+- `render`，`component`，`children` 是渲染组件的三种方式，这三种方式互斥，只会执行其中一个，优先级是`children` > `component` > `render`。
+- `path`：定义该组件对应的URL。
+- `exact`：仅当path与浏览器URL完全匹配时才匹配到该路由。
+- `sensitive`：在路由匹配时是否忽略大小写。
+- `strict`：路由匹配时是否忽略URL尾部的“/”。
+
+> 说明：
+> 当使用`component`传递组件渲染UI时，router将会用createElement来将给定的组件创建一个新的element，会执行组件对应的生命周期函数，而`render`和`children`这两种方式不会。
+
+**示例**
+
+```tsx
+import { BrowserRouter, Link, Route, Switch } from 'inula-router';
+
+const Home = () =>
Home Page
;
+const About = () => About Page
;
+const Contact = () => Contact Page
;
+
+const App = () => {
+ return (
+
+ Home
+ About
+ Contact
+
+ {/* 使用 Route 渲染匹配到路径的对应组件 */}
+ {/* 使用 exact 属性来确保只有当 URL 完全匹配时才渲染组件 */}
+
+ {/* 使用 render 属性来直接渲染一个内联函数返回的组件 */}
+ } />
+ {/* 使用 children 属性来渲染一个无论是否匹配都会显示的组件 */}
+ } />
+
+
+ );
+};
+```
+
+
+
+### Link
+
+**功能介绍**
+
+`Link`是一个可以生成超链接的组件，可以在不刷新页面的情况下跳转到其他路由。
+
+**接口定义**
+
+```tsx
+type LinkProps = {
+ component?: Inula.ComponentType;
+ to: Partial | string | ((location: Location) => string | Partial);
+ replace?: boolean;
+ tag?: string;
+} & Inula.AnchorHTMLAttributes;
+```
+
+
+
+- `to`：将一条记录加入到历史栈中来导航到一个新的 URL，可以为字符串、Location对象或函数。
+- `replace`：单击链接将替换而不是加入一个新的历史记录。
+- `component`：自定义导航组件。
+- `tag`：生成Link使用的HTML标签，默认为``。
+
+**示例**
+
+```tsx
+import { HashRouter, Link, Route, Switch } from 'inula-router';
+
+function App() {
+ return (
+
+ {/* 使用 Link 跳转到对应的路径，Link组件只能在Router下使用 */}
+ Home
+ About
+
+ Home page
} />
+ About Page
} />
+
+
+ );
+}
+```
+
+
+
+### NavLink
+
+**功能介绍**
+
+与`Link`组件相同，可以在不刷新页面的情况下跳转到其他路由。当呈现的组件与当前`URL`匹配时，`NavLink`会为元素添加对应的样式。
+
+**接口定义**
+
+```tsx
+type NavLinkProps = {
+ to: Partial | string | ((location: Location) => string | Partial);
+ isActive?: (match: Matched | null, location: Location) => boolean;
+} & LinkProps;
+```
+
+
+
+- `isActive`：指定一个函数，以确定该链接是否处于激活状态，当处于激活状态``标签的`aria-current`属性为`page`。
+
+**示例**
+
+```tsx
+import { HashRouter, Link, Route, Switch, NavLink } from 'inula-router';
+
+function App() {
+ return (
+
+ {/* 使用 NavLink 跳转到对应的路径，NavLink组件只能在Router下使用 */}
+ Home
+ About
+
+ Home page
} />
+ About Page
} />
+
+
+ );
+}
+```
+
+
+
+### Redirect
+
+**功能介绍**
+
+`Redirect`是一个可以执行重定向操作的组件，它可以在路由匹配时跳转到另一个路由。
+
+**接口定义**
+
+```tsx
+type RedirectProps = {
+ to: string | Partial;
+ push?: boolean;
+ path?: string;
+ from?: string;
+ exact?: boolean;
+ strict?: boolean;
+};
+```
+
+
+
+- `to`：重定向跳转到的位置。
+- `push`：重定向是否替换而不是加入一个新的历史记录。
+- `path`、`from`：用来指定重定向的目标路径，当URL为path或from的地址时，触发重定向。
+- `exact`：仅当path与浏览器URL完全匹配时才匹配到该路由。
+- `strict`：路由匹配时是否忽略URL尾部的“/”。
+
+> 说明：
+> `path`和`from`两个属性都可以用来指定重定向的目标路径，若两者同时设置，`path`的优先级高于`from`。
+
+**示例**
+
+```tsx
+import { HashRouter, Link, Route, Switch, Redirect } from 'inula-router';
+
+function App() {
+ return (
+
+ {/* 使用 Link 跳转到对应的路径，Link组件只能在Router下使用 */}
+ Home
+ About
+
+ Home page
} />
+ About Page
} />
+
+ {/* 当URL匹配不到时，使用Redirect组件跳转到Home页面 */}
+
+
+
+ );
+}
+```
+
+
+
+### Prompt
+
+**功能介绍**
+
+`Prompt`组件用于在用户离开页面时，弹出提示确认用户是否执行跳转行为，提示的回调函数返回布尔值，如果为`true`，则离开页面，如果为`false`，则停留在该页。
+
+**接口定义**
+
+```tsx
+type PromptProps = {
+ message?: string | ((location: Partial, action: Action) => string | boolean);
+ when?: boolean | ((location: Partial) => boolean);
+};
+
+enum Action {
+ pop = 'POP',
+ push = 'PUSH',
+ replace = 'REPLACE',
+}
+
+type Location = {
+ pathname: string;
+ search: string;
+ hash: string;
+ state?: object;
+};
+```
+
+
+
+- `message`：当用户尝试离开时提示用户的消息。将通过用户尝试导航到的下一个位置时。返回一个字符串以向用户显示提示，或返回`true`以允许用户跳转。
+- `when`：指定在对应条件下渲染`Prompt`以阻止用户跳转页面。
+
+**示例**
+
+在该实例中，当用户在`Input`中输入字符后再跳转到其他页面时，`Prompt`组件会阻止路由跳转并询问用户是否执行跳转。
+
+```tsx
+import { useState } from 'openinula';
+import { BrowserRouter, Link, Switch, Route, Prompt } from 'inula-router';
+
+function PromptDemo() {
+ return (
+
+ Form
+ Other Page
+
+
+ } />
+ Other Page} />
+
+
+ );
+}
+
+function InputForm() {
+ let [isBlocking, setIsBlocking] = useState(false);
+
+ return (
+
+ );
+}
+```
+
+
+
+## Inula-router 函数式API
+
+### useHistory
+
+**功能介绍**
+
+`useHistory`是一个函数，调用`useHistory`返回`inula-router`中的`history`对象。
+
+**定义**
+
+```tsx
+function useHistory(): History
+```
+
+
+
+* History对象具有的属性：
+ - `length`: 历史记录栈的长度。
+ - `action`: 当前导航的动作类型，可以是`PUSH`、`REPLAC`E或`POP`。
+ - `location`: 当前的位置对象，包含`pathname`、`search`、`hash`和`state`等属性。
+* history具有的方法：
+ - `push(path,state)`: 用于向历史记录栈中添加一个新的位置，并导航到该位置。
+ - `replace(path,state)`: 用于替换历史记录栈中的当前位置，并导航到新的位置。
+ - `go(n)`: 用于在历史记录栈中向前或向后跳转指定的步数。
+ - `goBack()`: 用于回退到历史记录栈中的上一个位置，等价于go(-1)。
+ - `goForward()`: 用于前进到历史记录栈中的下一个位置，等价于go(1)。
+ - `block()`: 用于阻止导航，并在导航发生时执行一个回调函数。
+ - `listen()`: 用于注册一个监听器，当历史记录发生变化时执行。
+
+**示例**
+
+```tsx
+import { useHistory } from 'inula-router';
+
+function HomeButton() {
+ let history = useHistory();
+
+ function handleClick() {
+ history.push('/home');
+ }
+
+ return (
+
+ );
+}
+```
+
+
+
+### useLocation
+
+**功能介绍**
+`useLocation`是一个函数，调用`useLocation`返回一个`Location`对象，包含当前`URL`信息，如路径名、查询字符串、哈希。当浏览器的`URL`发生变化，`useLocation`就会随之变化。
+
+**定义**
+
+```tsx
+function useLocation(): Location;
+
+// Location对象结构
+type Location = {
+ pathname: string; // URL路径名
+ search: string; // URL查询字符串
+ hash: string; // URL哈希值
+ state: Object; // 额外状态数据
+};
+```
+
+
+
+**示例**
+
+```tsx
+import { useLocation } from 'inula-router';
+
+function App() {
+ {/* 使用useLocation获取当前位置 */}
+ let location = useLocation();
+
+ useEffect(() => {
+ console.log('location change to ', location);
+ }, [location]);
+}
+```
+
+
+
+### useParams
+
+**功能介绍**
+
+`useParams`是一个函数，调用`useParams`返回一个包含当前URL下路由参数的对象，比如 /user/:id 中的 id 。
+
+**定义**
+
+```tsx
+function useParams(): Params | {};
+
+type Params = { [K in keyof P]?: P[K] };
+```
+
+
+
+**示例**
+
+```tsx
+import { HashRouter, Switch, Route, useParams } from 'inula-router';
+
+const User = () => {
+ // 使用 useParams 获取URL中对应的参数
+ const { userid } = useParams();
+
+ return {userid} profile page
;
+};
+
+function App() {
+ return (
+
+
+ }/>
+
+
+ );
+}
+```
+
+
+
+### useRouteMatch
+
+**功能介绍**
+
+`useRouteMatch`返回一个包含当前路由的匹配信息的`match`对象，可以在无需``的情况下访问匹配数据，`useRouteMatch`对于那些非路由但自身状态与当前路径相关的组件非常有用。
+
+**定义**
+
+```tsx
+function useRouteMatch(path?: string): Matched
| null
+
+// match对象结构
+type Matched = {
+ score: number[]; // 匹配到该URL的匹配分数
+ params: Object; // 从URL中解析出来的与path对应的参数
+ path: string; // 匹配使用的URL模板
+ url: string; // 匹配到的URL部分
+ isExact: boolean; // 是否完全匹配URL
+};
+```
+
+
+
+**示例**
+
+- 不使用`useRouteMatch`
+
+```tsx
+import { BrowserRouter, Switch, Route } from 'inula-router';
+
+// Header组件只会在匹配`/detail/:id`时出现
+const Header = () => {
+ return (
+ {
+ return match && Header
+ }}
+ />
+ )
+}
+function App() {
+ return (
+
+
+
+ Home
}/>
+ Detail
}/>
+
+
+ );
+}
+```
+
+
+
+- 使用`useRouteMatch`
+
+```tsx
+import { BrowserRouter, Switch, Route, useRouteMatch } from 'inula-router';
+
+// Header组件只会在匹配`/detail/:id`时出现
+const Header = () => {
+ // 只有当前路径匹配`/detail/:id`时，match不为null
+ const match = useRouteMatch('/detail/:id')
+ return (
+ match && Header
+ )
+}
+function App() {
+ return (
+
+
+
+ Home
}/>
+ Detail
}/>
+
+
+ );
+}
+```
+
+
+
+### withRouter
+
+**功能介绍**
+
+`withRouter`是一个高阶函数组件，可以将inula-router的`history`，`location`，`match`三个对象注入到任何自定义组件中的props中。
+
+* `history`
+ - `length`: 历史记录栈的长度。
+ - `action`: 当前导航的动作类型，可以是PUSH、REPLACE或POP。
+ - `location`: 当前的位置对象，包含pathname、search、hash和state等属性。
+ - `push(path,state)`: 用于向历史记录栈中添加一个新的位置，并导航到该位置。
+ - `replace(path,state)`: 用于替换历史记录栈中的当前位置，并导航到新的位置。
+ - `go(n)`: 用于在历史记录栈中向前或向后跳转指定的步数。
+ - `goBack()`: 用于回退到历史记录栈中的上一个位置，等价于go(-1)。
+ - `goForward()`: 用于前进到历史记录栈中的下一个位置，等价于go(1)。
+ - `block()`: 用于阻止导航，并在导航发生时执行一个回调函数。
+ - `listen()`: 用于注册一个监听器，当历史记录发生变化时执行。
+* `location`
+ - `pathname`: URL路径名。
+ - `search`: URL查询字符串。
+ - `hash`: URL哈希值。
+ - `state`: 额外状态数据。
+* `match`
+ - `score`: 匹配到该URL的匹配分数。
+ - `params`: 从URL中解析出来的与path对应的参数.
+ - `path`: 匹配使用的URL模板。
+ - `url`: 匹配到的URL部分。
+ - `isExact`: 是否完全匹配URL。
+
+**示例**
+
+```tsx
+import Inula from 'openinula';
+import { withRouter } from 'inula-router';
+
+class DemoComponent extends Inula.Component {
+ // 可以在这里使用this.props.history、this.props.location、this.props.match等属性
+
+ toHome = () => {
+ this.props.history.push('/home'); // 通过history对象push方法返回首页
+ };
+
+ render() {
+ return (
+
+ );
+ }
+}
+
+export default withRouter(DemoComponent) // 使用withRouter包裹组件
+```
\ No newline at end of file
diff --git a/packages/website-next/src/app/blog/[slug]/page.tsx b/packages/website-next/src/app/blog/[slug]/page.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6accc86e3d6f3418de22d8e1aa4d144fb5601977
--- /dev/null
+++ b/packages/website-next/src/app/blog/[slug]/page.tsx
@@ -0,0 +1,108 @@
+import React from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { compileMdx } from "nextra/compile";
+import { MDXRemote } from "nextra/mdx-remote";
+
+const BLOG_API =
+ "https://openinula-website.obs.ap-southeast-1.myhuaweicloud.com/data/blogData.json";
+const MD_BASE =
+ "https://openinula-website.obs.ap-southeast-1.myhuaweicloud.com/doc/";
+
+async function getBlogData() {
+ const res = await fetch(BLOG_API, { cache: "no-store" });
+ if (!res.ok) throw new Error("无法获取博客数据");
+ return res.json();
+}
+
+async function getBlogMd(slug: string) {
+ const url = `${MD_BASE}blog.${slug}.md`;
+ const res = await fetch(url, { cache: "no-store" });
+ if (!res.ok) return null;
+ return res.text();
+}
+
+// 你可以在这里自定义 mdx 组件
+const components = {
+ // 例如：MyComponent: () => My Component
,
+};
+
+interface BlogParams {
+ slug: string;
+}
+
+interface BlogData {
+ key: string | number;
+ title: string;
+ author: string;
+ time: string;
+ type: string;
+ img?: string;
+}
+
+export default async function BlogDetailPage({
+ params,
+}: {
+ params: Promise;
+}) {
+ const resolvedParams = await params;
+ const blogs = await getBlogData();
+ const blog = blogs.find(
+ (b: BlogData) => String(b.key) === resolvedParams.slug
+ );
+ if (!blog) {
+ return (
+
+ 未找到对应博客
+
+ );
+ }
+ const mdContent = await getBlogMd(resolvedParams.slug);
+ if (!mdContent) {
+ return (
+
+ 博客正文加载失败
+
+ );
+ }
+ // 编译 mdx 内容
+ const compiled = await compileMdx(mdContent);
+ return (
+
+
+ {/* 封面图 */}
+ {blog.img && (
+
+ )}
+ {/* 标题 */}
+
+ {blog.title}
+
+ {/* 作者/时间/类型 */}
+
+ 作者：{blog.author}
+ 发表于：{blog.time}
+
+ {blog.type}
+
+
+ {/* 正文 */}
+
+
+
+
+
+ ← 返回博客列表
+
+
+
+ {blog.img ? (
+
+ ) : (
+
B
+ )}
+
+
{blog.title}
+
+ {blog.author || "-"}
+ ·
+ {blog.type}
+
+
+
+
+ {/* 标签区，预留 */}
+ 标签
+ {/* 时间 */}
+ {blog.time}
+
+
+ {/* 类型筛选 */}
+
+ 类型
+
+
+ {/* 搜索栏 */}
+
+
+ {keyword && (
+
+ )}
+
+
+ {blogs.map((item) => (
+
+ ))}
+
+ );
+}
\ No newline at end of file
diff --git a/packages/website-next/src/app/blog/components/BlogPagination.tsx b/packages/website-next/src/app/blog/components/BlogPagination.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d1182cca66f401b1dc64cc1ebd1d355f11314688
--- /dev/null
+++ b/packages/website-next/src/app/blog/components/BlogPagination.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+interface BlogPaginationProps {
+ page: number;
+ totalPages: number;
+ total: number;
+ onPrev: () => void;
+ onNext: () => void;
+}
+
+export default function BlogPagination({ page, totalPages, total, onPrev, onNext }: BlogPaginationProps) {
+ return (
+
+
+ 共 {total} 条，{page}/{totalPages || 1} 页
+
+
+
+
+
+
+
博客概览
+ {/* 控件区 */}
+
+ {/* 列表区 */}
+ {
+ (() => {
+ let renderListContent;
+ if (loading) {
+ renderListContent = (
+
+ {Array.from({ length: 4 }).map((_, i) => (
+
+
+
+ ))}
+
+ );
+ } else if (pagedBlogs.length === 0) {
+ renderListContent = (
+
暂无数据
+ );
+ } else {
+ renderListContent =
;
+ }
+ return renderListContent;
+ })()
+ }
+ {/* 分页 */}
+
+
+
+ {/* 页面标题 */}
+
+
+ 联系我们
+
+
+ 了解 openInula 项目理念，与我们建立联系
+
+
+
+
+ {/* 项目理念板块 */}
+
+
+
+
+ 项目理念
+
+
+
+ {/* 左上角图片 */}
+
+
+ {/* 居中内容 */}
+
+ {/* 项目介绍 */}
+
+
+ 项目介绍
+
+
+ openInula是一款用于构建用户界面的JavaScript库，提供响应式API并完全兼容现有React生态，凭借高性能、易用性以及对React生态的兼容，帮助开发者简单高效构建高质量的前端项目。此外，openInula涵盖了一系列核心组件，包含状态管理器、路由、国际化、请求组件等；并提供应用脚手架等开发工具，以便开发者更高效地管理和维护基于openInula的前端产品。我们期待openInula能提升现代Web前端开发体验，为全球开发者提供全新选择。
+
+
+
+ {/* 历史发展 */}
+
+
+ 历史发展
+
+
+
+
+
+
+ 2023年7月 - openInula在全球开源技术峰会首秀。
+
+
+
+
+
+
+
+ 2023年9月22日 - 项目首发开源。开源后命名为openInula。
+
+
+
+
+
+
+
+
+
+
+
+ {/* 联系我们板块 */}
+
+
+
+
+ 联系我们
+
+
+
+ {/* 上方地图 */}
+
+
+ {/* 下方联系方式 */}
+
+ {/* 邮箱联系 */}
+
+
+ {/* 微信公众号 */}
+
+
+
+
+
+ 微信公众号
+
+
+ 扫描二维码关注我们
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* 侧边栏 */}
+
+
+ {/* 主内容区 */}
+
+ {/* 移动端文档选择器 */}
+
+
+ {title}
+
+
+ {documents.map((doc) => (
+
+ ))}
+
+
+ {children
+ ? children(currentDoc)
+ : currentDoc && (
+
+
+ {currentDoc.title}
+
+
+ {currentDoc.description}
+
+
+ )}
+
+
+
Hello
; }
+function World() { return World
; }
+
+```
+- 支持 props 透传、context 获取、生命周期钩子。
+- 支持组件切换时自动卸载/挂载。
+
+## props/context/生命周期
+
+- 支持 props 传递：
+```tsx filename="DynamicWithProps.jsx"
+
+```
+- 支持 context：
+```tsx filename="DynamicWithContext.jsx"
+const Ctx = createContext(0);
+
+
+
+```
+- 支持 didUnmount/willUnmount 等生命周期钩子。
+
+## 多元素/事件/空组件
+
+- 支持组件返回多个元素（Fragment）：
+```tsx filename="DynamicMultiElement.jsx"
+function Multi() { return <>First
Second
; }
+
+```
+- 支持事件处理：
+```tsx filename="DynamicWithEvent.jsx"
+function Btn({ onClick }) { return ; }
+
+```
+- component 可为 null/undefined，渲染为空。
+
+## 注意事项
+
+- component 可为 null/undefined，渲染为空。
+- 支持多种 props 结构、rest props。
+- 支持多元素返回、事件处理。
+
+## 最佳实践
+
+- 用于需要动态切换组件的场景，如 tab、动态表单等。
+- props 建议使用解构，便于类型推导和响应式。
+
+## 相关链接
+
+- [React Dynamic Rendering](https://react.dev/reference/react/cloneElement)
\ No newline at end of file
diff --git a/packages/website-next/src/app/docs/components/ErrorBoundary/page.mdx b/packages/website-next/src/app/docs/components/ErrorBoundary/page.mdx
new file mode 100644
index 0000000000000000000000000000000000000000..77ce2682641d4f119dda1cd79c6e74dc97745503
--- /dev/null
+++ b/packages/website-next/src/app/docs/components/ErrorBoundary/page.mdx
@@ -0,0 +1,54 @@
+---
+id: ErrorBoundary
+title: ErrorBoundary
+sidebar_label: ErrorBoundary
+---
+
+# ErrorBoundary
+
+`ErrorBoundary` 组件用于捕获其子组件渲染过程中的异常，并渲染备用 UI（fallback）。适用于防止整个应用因单个组件错误而崩溃。
+
+## 典型用法
+
+```tsx filename="ErrorBoundaryExample.jsx"
+function BuggyComponent() {
+ throw new Error('出错了');
+ return 不会渲染
;
+}
+
+const Fallback = error => {error.message}
;
+
+
+
+
+```
+
+- 当子组件抛出异常时，`fallback` 会接收到 error 对象并渲染对应内容。
+- 正常情况下渲染 children。
+
+## 嵌套与错误冒泡
+
+支持嵌套 ErrorBoundary，错误会冒泡到最近的 ErrorBoundary：
+
+```tsx filename="NestedErrorBoundary.jsx"
+ 外部错误: {outerErr.message}
}>
+ 内部错误: {innerErr.message}
}>
+
+
+
+```
+
+## 注意事项
+
+- `fallback` 必须是函数，参数为 error。
+- 只捕获渲染过程中的错误，不捕获事件处理等异步错误。
+- 多层嵌套时，内层优先捕获。
+
+## 最佳实践
+
+- 建议在应用入口或关键区域包裹 ErrorBoundary。
+- fallback UI 应简洁明了，便于用户理解。
+
+## 相关链接
+
+- [React Error Boundaries](https://reactjs.org/docs/error-boundaries.html)
\ No newline at end of file
diff --git a/packages/website-next/src/app/docs/components/Fragment/page.mdx b/packages/website-next/src/app/docs/components/Fragment/page.mdx
new file mode 100644
index 0000000000000000000000000000000000000000..4836a667e22dcb2426c8ec746f47b9575deb2dda
--- /dev/null
+++ b/packages/website-next/src/app/docs/components/Fragment/page.mdx
@@ -0,0 +1,68 @@
+---
+id: Fragment
+title: Fragment
+sidebar_label: Fragment
+---
+
+# Fragment
+
+`Fragment` 用于包裹多个元素，避免额外的 DOM 节点，常用于返回多个兄弟节点的场景。
+
+## 典型用法
+
+```tsx filename="FragmentExample.jsx"
+<>
+ First
+ Second
+
+```
+- 渲染结果不会多出额外的 DOM 层级。
+
+## 嵌套/条件/三元/事件
+
+- 支持嵌套：
+```tsx filename="NestedFragment.jsx"
+<>
+ Start
+ <>
+ Nested
+ Child
+
+ End
+
+```
+- 支持条件渲染：
+```tsx filename="ConditionalFragment.jsx"
+<>
+ Always
+ {showExtra && <>Extra 1
Extra 2
}
+
+```
+- 支持三元表达式：
+```tsx filename="TernaryFragment.jsx"
+<>
+ {cond ? <>True 1
True 2
: <>False 1
False 2
}
+
+```
+- 支持事件处理：
+```tsx filename="FragmentWithEvent.jsx"
+<>
+
+ {clicked ? 'Clicked' : 'Not clicked'}
+
+```
+
+## 注意事项
+
+- Fragment 不会影响 CSS 或事件。
+- 可与文本、JSX 表达式混用。
+- 支持多层嵌套。
+
+## 最佳实践
+
+- 用于组件需要返回多个兄弟节点时，避免多余的 div。
+- 可与条件渲染、列表渲染等结合使用。
+
+## 相关链接
+
+- [React Fragments](https://react.dev/reference/react/Fragment)
\ No newline at end of file
diff --git a/packages/website-next/src/app/docs/components/Portal/page.mdx b/packages/website-next/src/app/docs/components/Portal/page.mdx
new file mode 100644
index 0000000000000000000000000000000000000000..38ab24f4362ba6f1dffd35b6ee4334bcb64a8634
--- /dev/null
+++ b/packages/website-next/src/app/docs/components/Portal/page.mdx
@@ -0,0 +1,64 @@
+---
+id: Portal
+title: Portal
+sidebar_label: Portal
+---
+
+# Portal
+
+`Portal` 组件用于将子节点渲染到指定的 DOM 容器外部，常用于模态框、弹窗等场景。
+
+## 典型用法
+
+```tsx filename="PortalExample.jsx"
+const portalRoot = document.getElementById('portal-root');
+
+ Portal Content
+
+```
+- target 必须为有效的 DOM 元素。
+- 组件卸载时自动移除内容。
+
+## 多 Portal 与嵌套 Portal
+
+- 支持多个 Portal 指向同一目标：
+
+```tsx filename="MultiPortal.jsx"
+First Content
+Second Content
+```
+- 支持嵌套 Portal：
+
+```tsx filename="NestedPortal.jsx"
+
+ Outer Content
+
+ Inner Content
+
+
+```
+
+## 事件处理
+
+- Portal 内的事件（如 onClick）可正常冒泡和处理。
+
+```tsx filename="PortalEvent.jsx"
+
+
+
+```
+
+## 注意事项
+
+- target 必须为已挂载的 DOM 元素。
+- 组件卸载时内容会自动清理。
+- 支持内容和事件的动态更新。
+
+## 最佳实践
+
+- 用于模态框、弹窗、全局提示等需要脱离父 DOM 层级的场景。
+- 建议统一管理 portal 容器节点。
+
+## 相关链接
+
+- [React Portal](https://react.dev/reference/react-dom/createPortal)
\ No newline at end of file
diff --git a/packages/website-next/src/app/docs/components/Suspense/page.mdx b/packages/website-next/src/app/docs/components/Suspense/page.mdx
new file mode 100644
index 0000000000000000000000000000000000000000..bcdc5b2fc92b6d659d920dccdb4bbe80c4cf3a19
--- /dev/null
+++ b/packages/website-next/src/app/docs/components/Suspense/page.mdx
@@ -0,0 +1,54 @@
+---
+id: Suspense
+title: Suspense & lazy
+sidebar_label: Suspense & lazy
+---
+
+# Suspense & lazy
+
+`Suspense` 组件用于包裹异步组件（如 `lazy` 加载），在异步加载期间渲染 fallback。`lazy` 用于声明异步加载的组件。
+
+## 典型用法
+
+```tsx filename="SuspenseExample.jsx"
+const LazyComponent = lazy(() => import('./Comp'));
+
+loading...
+ }
+ actions={actions}
+ >
+ 
+ );
+ };
+
+ const Greeting = (props) => {
+ return (
+