Merge branch 'feature/alova@3.x'

docs/tutorial/02-getting-started/01-introduce.md

@@ -12,11 +12,11 @@ import IconFont from '@site/src/components/IconFont';
 
 ## What is alova?
 
-alova (pronounced `/əˈləʊva/` <AudioPlayer src={tts} />) is an creative next-generation request tool that helps you maximize API usage efficiency and save brainpower. Integrating the server-side APIs into the front-end project is simplified to only one step.
+alova (pronounced `/əˈləʊva/` <AudioPlayer src={tts} />) is an workflow-streamlined next-generation request tool that helps you extremely streamline API integration workflow.
 
 ![](/img/overview_flow_en.png)
 
-It can simplify API consumption from 7 steps to 1 step. You only need to choose the API to use.
+It can streamline API integration workflow from 7 steps to 1 step. You only need to choose the API to use.
 
 ## How to do it?
 
@@ -32,16 +32,37 @@ const response = await alova.Get('/api/user');
 
 Based on the core functions of alova, it also provides a complete solution for complex request scenarios, which we call **request strategy**. With only one line of code, you can quickly implement various complex request logics, which can not only help you improve development efficiency, but also help you improve the running efficiency of the App and reduce the pressure on the server.
 
-For example, `useRequest` can automatically manage the request status, **`loading/error/data` is responsive data**, which can be directly bound in the view in UI frameworks such as react, vue, and svelte, and these responsive data will be automatically maintained according to the request status.
+For example, `useRequest` can automatically manage the request states, **`loading/error/data` is responsive data**, which can be directly bound in the view in UI frameworks such as react, vue, and svelte, and these responsive data will be automatically maintained according to the request states.
 
 ```javascript
 const { loading, error, data } = useRequest(alova.Get('/api/user'));
 ```
 
-Another paging request strategy, **when `page/pageSize` changes, it will automatically trigger requests with different parameters**.
+Here is another pagination request strategy, which includes responsive states, actions, events, and **when `page/pageSize` changes, it will automatically trigger a request with different parameters**.
 
 ```javascript
-const { loading, error, data, page, pageSize, total } = usePagination((page, size) =>
+const {
+  // states
+  loading,
+  error,
+  data,
+  page,
+  pageSize,
+  total,
+
+  // actions
+  refresh,
+  insert,
+  replace,
+  remove,
+  reload
+
+  // events
+  onSuccess,
+  onFetchSuccess,
+  onError,
+  onFetchError
+} = usePagination((page, size) =>
   alova.Get('/api/user/list', {
     params: { page, size }
   })
@@ -56,6 +77,10 @@ Using the alova extension in vscode can help you automatically generate request
 
 This extension also optimizes the API usage process, allowing you to experience a different API integration experience. In the past, you needed to query the API documentation first, and constantly switch between the API documentation and the editor to write request code. After using the alova plug-in, you no longer need to leave the editor and can directly use the API in the editor while checking.
 
+import vscodeDemoVideo from '@site/static/video/vscode-demo-video-en.mp4';
+
+<video width="100%" controls controlsList="nodownload" src={vscodeDemoVideo} />
+
 > For a detailed introduction to the alova plug-in, please refer to [Integrated Editor Extension](/tutorial/getting-started/extension-integration).
 
 ## Is there any difference?

docs/tutorial/02-getting-started/09-extension-integration.md

@@ -14,7 +14,7 @@ Integrating Alova's editor extension can make it more powerful.
 
 The following is an extended demonstration video
 
-import vscodeDemoVideo from '@site/static/video/vscode-demo-video-chinese.mp4';
+import vscodeDemoVideo from '@site/static/video/vscode-demo-video-en.mp4';
 
 <video width="100%" controls controlsList="nodownload" src={vscodeDemoVideo} />
 

docusaurus.config.ts

@@ -126,6 +126,10 @@ const config: Config = {
               label: 'Comparison',
               to: 'about/comparison'
             },
+            {
+              label: 'Releases',
+              to: 'https://github.com/alovajs/alova/releases'
+            },
             {
               label: 'Q&A',
               to: 'about/qa'

i18n/zh-CN/code.json

@@ -277,16 +277,16 @@
     "message": "创新的下一代请求工具",
     "description": "the title"
   },
-  "homepage.title.Creative": {
-    "message": "创新的",
+  "homepage.title.Streamlined": {
+    "message": "工作流精简的",
     "description": "First part of the title"
   },
   "homepage.title.Next Generation Request Tool": {
     "message": "下一代请求工具",
     "description": "The second part of the title"
   },
   "homepage.tagline": {
-    "message": "极致地提升你的API接入效率，节约大脑，仅需一步",
+    "message": "极致地简化你的API集成工作流，仅需一步",
     "description": "网站tagline"
   },
   "homepage.automaticGenerate.sectionTitle": {

i18n/zh-CN/docusaurus-plugin-content-docs/current/tutorial/02-getting-started/01-introduce.md

@@ -11,10 +11,12 @@ import AudioPlayer from '@site/src/components/AudioPlayer';
 
 ## alova 是什么？
 
-alova（读作`/əˈləʊva/`<AudioPlayer src={tts} />） 是一个创新的下一代请求工具，帮你极致地提升 API 使用效率，节约大脑。将服务端接口集成到前端项目简化为只有 1 步。
+alova（读作`/əˈləʊva/`<AudioPlayer src={tts} />） 是一个流程简化的下一代请求工具，帮你极致地简化 API 集成工作流。
 
 ![](/img/overview_flow_cn.png)
 
+它可以将 API 集成工作流从 7 个步骤简化为 1 个步骤，你只需要选择 API 即可使用。
+
 ## 如何做的？
 
 ### 核心功能
@@ -29,16 +31,37 @@ const response = await alova.Get('/api/user');
 
 基于 alova 的核心功能，还提供了完整的应对复杂请求场景的方案，我们称之为**请求策略**，只需一行代码就能快速实现各种复杂的请求逻辑，不仅能帮你提升开发效率，还能帮你提升 App 的运行效率，降低服务端压力。
 
-例如，`useRequest`可以自动管理请求状态，**`loading/error/data` 是响应式的数据**，在 react、vue、svelte 等 UI 框架中可以直接在视图中绑定它们，而且会根据请求状态自动维护它这些响应式数据。
+例如，`useRequest`可以自动管理请求状态，**`loading/error/data` 是响应式的数据**，在 react、vue、svelte 等 UI 框架中可以直接在视图中绑定它们，而且会根据请求状态自动维护这些响应式数据。
 
 ```javascript
 const { loading, error, data } = useRequest(alova.Get('/api/user'));
 ```
 
-再来一个分页请求策略，**当`page/pageSize`等发生变化时会自动以不同参数触发请求**。
+再来一个分页请求策略，它包含响应式状态、操作函数、事件，并且**当`page/pageSize`等发生变化时会自动以不同参数触发请求**。
 
 ```javascript
-const { loading, error, data, page, pageSize, total } = usePagination((page, size) =>
+const {
+  // 响应式状态
+  loading,
+  error,
+  data,
+  page,
+  pageSize,
+  total,
+
+  // 操作函数
+  refresh,
+  insert,
+  replace,
+  remove,
+  reload
+
+  // 事件
+  onSuccess,
+  onFetchSuccess,
+  onError,
+  onFetchError
+} = usePagination((page, size) =>
   alova.Get('/api/user/list', {
     params: { page, size }
   })
@@ -53,6 +76,10 @@ alova 提供了 15+个基于[RSM](/about/RSM)规范的请求策略模块，它
 
 这个扩展也优化了 API 的使用流程，让你感受不一样的 API 集成体验，在过去，你需要先查询 API 文档，并不断地在 API 文档与编辑器切换来编写请求代码，使用 alova 插件后，你可以不再需要离开编辑器，直接在编辑器中边查边使用 API。
 
+import vscodeDemoVideo from '@site/static/video/vscode-demo-video-chinese.mp4';
+
+<video width="100%" controls controlsList="nodownload" src={vscodeDemoVideo} />
+
 > 关于 alova 插件的详细介绍，请参考 [集成编辑器扩展](/tutorial/getting-started/extension-integration)。
 
 ## 有什么不同吗？

src/pages/index.tsx

@@ -76,8 +76,8 @@ function HomepageHeader() {
         <div className="flex flex-col md:flex-row items-stretch gap-20 md:gap-10 justify-between md:mt-32 mt-16 mx-5 md:mx-0">
           <div className="relative">
             <div className="font-sans md:text-6xl text-4xl font-bold !leading-tight">
-              <p className={styles.titleGradient}>
-                <Translate id="homepage.title.Creative">Creative</Translate>
+              <p className={clsx(styles.titleGradient, 'md:text-4xl text-2xl')}>
+                <Translate id="homepage.title.Streamlined">Workflow-Streamlined</Translate>
               </p>
               <p className="text-slate-900 tracking-normal dark:text-slate-50 mt-3">
                 <Translate id="homepage.title.Next Generation Request Tool">
@@ -87,7 +87,7 @@ function HomepageHeader() {
             </div>
             <p className="mt-4 max-w-3xl text-lg space-y-6">
               <Translate id="homepage.tagline">
-                Extremely improve your API using efficiency and save brainpower Just one step
+                Extremely streamline API integration workflow. Just one step
               </Translate>
             </p>
             <div className="flex flex-col md:items-stretch items-center">