From 8a5e9ab398d877cf1ca4b92d44b6ce29153a01b4 Mon Sep 17 00:00:00 2001
From: 2betop <2betop.cn@gmail.com>
Date: Thu, 8 Jun 2023 19:01:56 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E8=A1=A5=E5=85=85=20wizard=20=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3=20&=20=E4=BC=98=E5=8C=96=20vite=20=E5=93=8D=E5=BA=94?=
 =?UTF-8?q?=20/examples/index=20=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/zh-CN/components/wizard.md        | 163 +++++++++++++++++++++++++
 index.html                             |  16 +--
 mock/cfc/mock/initWizard.json          |   9 ++
 packages/amis/src/renderers/Wizard.tsx |  32 +++--
 scripts/mockApiPlugin.ts               |  16 +++
 5 files changed, 215 insertions(+), 21 deletions(-)
 create mode 100644 mock/cfc/mock/initWizard.json

diff --git a/docs/zh-CN/components/wizard.md b/docs/zh-CN/components/wizard.md
index 3e0f5b75e..d15a8f2aa 100755
--- a/docs/zh-CN/components/wizard.md
+++ b/docs/zh-CN/components/wizard.md
@@ -55,6 +55,167 @@ order: 73
 }
 ```
 
+## 自定义按钮
+
+可以在每个 `step` 中配置 `actions` 来自定义按钮。
+
+```schema: scope="body"
+{
+    "type": "wizard",
+    "steps": [
+        {
+            "title": "第一步",
+            "body": [
+                {
+                    "name": "website",
+                    "label": "网址",
+                    "type": "input-url"
+                },
+                {
+                    "name": "email",
+                    "label": "邮箱",
+                    "type": "input-email"
+                }
+            ],
+            actions: [
+                {
+                    label: "Next",
+                    type: 'button',
+                    actionType: 'next'
+                }
+            ]
+        },
+        {
+            "title": "Step 2",
+            "body": [
+                {
+                    "name": "email2",
+                    "label": "邮箱",
+                    "type": "input-email"
+                }
+            ],
+            actions: [
+                {
+                    label: "Prev",
+                    type: 'button',
+                    actionType: 'prev'
+                },
+
+                {
+                    label: "Submit",
+                    type: 'button',
+                    actionType: 'next'
+                }
+            ]
+        },
+        {
+            "title": "Step 3",
+            "body": [
+                "这是最后一步了, 没有按钮"
+            ],
+            actions: []
+        }
+    ]
+}
+```
+
+## 初始化到某一步
+
+`initApi` 接口返回 `step` 字段即可，注意得是数字类型。`1` 表示第一步，`2` 表示第二步，以此类推
+
+```schema: scope="body"
+{
+    "type": "wizard",
+    "initApi": "/api/mock2/initWizard",
+    "steps": [
+        {
+            "title": "第一步",
+            "body": [
+                {
+                    "name": "website",
+                    "label": "网址",
+                    "type": "input-url",
+                    "required": true
+                },
+                {
+                    "name": "email",
+                    "label": "邮箱",
+                    "type": "input-email",
+                    "required": true
+                }
+            ]
+        },
+        {
+            "title": "Step 2",
+            "body": [
+                {
+                    "name": "email2",
+                    "label": "邮箱",
+                    "type": "input-email",
+                    "required": true
+                }
+            ]
+        },
+        {
+            "title": "Step 3",
+            "body": [
+                "这是最后一步了"
+            ]
+        }
+    ]
+}
+```
+
+## 限制跳转
+
+可以通过在 step 上配置 `jumpableOn` 来限制跳转，可以基于整体 wizard 数据，或者基于 `currentStep` 来判断。
+
+比如：`"jumpableOn": "${!website}",` 当设置完成了 website 后不可以回去跳转
+
+```schema: scope="body"
+{
+    "type": "wizard",
+    "initApi": "/api/mock2/initWizard",
+    "steps": [
+        {
+            "title": "第一步",
+            "jumpableOn": "${!website}",
+            "body": [
+                {
+                    "name": "website",
+                    "label": "网址",
+                    "type": "input-url",
+                    "required": true
+                },
+                {
+                    "name": "email",
+                    "label": "邮箱",
+                    "type": "input-email",
+                    "required": true
+                }
+            ]
+        },
+        {
+            "title": "Step 2",
+            "body": [
+                {
+                    "name": "email2",
+                    "label": "邮箱",
+                    "type": "input-email",
+                    "required": true
+                }
+            ]
+        },
+        {
+            "title": "Step 3",
+            "body": [
+                "这是最后一步了"
+            ]
+        }
+    ]
+}
+```
+
 ## 属性表
 
 | 属性名              | 类型                                     | 默认值               | 说明                                                                                                                                                     |
@@ -93,6 +254,8 @@ order: 73
 | initFetchOn         | [表达式](../../docs/concepts/expression) |        | 当前步骤数据初始化接口是否初始拉取，用表达式来决定。                                                        |
 | body                | Array<[FormItem](./form/formItem)>       |        | 当前步骤的表单项集合，请参考 [FormItem](./form/formItem)。                                                  |
 | closeDialogOnSubmit | `boolean`                                |        | 提交的时候是否关闭弹窗。当 widzard 里面有且只有一个弹窗的时候，本身提交会触发弹窗关闭，此属性可以关闭此行为 |
+| jumpableOn          | `string`                                 |        | 配置是否可跳转的表达式                                                                                      |
+| actions             | `Array<Schema>`                          |        | 自定义每一步的操作按钮                                                                                      |
 
 ## 事件表
 
diff --git a/index.html b/index.html
index 7aaa7a912..214e3fe50 100644
--- a/index.html
+++ b/index.html
@@ -7,27 +7,27 @@
     <link
       type="image/x-icon"
       rel="shortcut icon"
-      href="./examples/static/favicon.png"
+      href="/examples/static/favicon.png"
     />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, maximum-scale=1"
     />
     <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
-    <link rel="stylesheet" href="./examples/static/iconfont.css" />
-    <link rel="stylesheet" href="./examples/static/officefont.css" />
+    <link rel="stylesheet" href="/examples/static/iconfont.css" />
+    <link rel="stylesheet" href="/examples/static/officefont.css" />
     <link
       rel="stylesheet"
-      href="./node_modules/@fortawesome/fontawesome-free/css/all.css"
+      href="/node_modules/@fortawesome/fontawesome-free/css/all.css"
     />
     <link
       rel="stylesheet"
-      href="./node_modules/@fortawesome/fontawesome-free/css/v4-shims.css"
+      href="/node_modules/@fortawesome/fontawesome-free/css/v4-shims.css"
     />
-    <link rel="stylesheet" href="./node_modules/prismjs/themes/prism.css" />
-    <link rel="stylesheet" href="./examples/doc.css" />
+    <link rel="stylesheet" href="/node_modules/prismjs/themes/prism.css" />
+    <link rel="stylesheet" href="/examples/doc.css" />
 
-    <link rel="stylesheet" href="./examples/style.scss" />
+    <link rel="stylesheet" href="/examples/style.scss" />
     <style>
       .app-wrapper,
       .schema-wrapper {
diff --git a/mock/cfc/mock/initWizard.json b/mock/cfc/mock/initWizard.json
new file mode 100644
index 000000000..8df88a61a
--- /dev/null
+++ b/mock/cfc/mock/initWizard.json
@@ -0,0 +1,9 @@
+{
+  "status": 0,
+  "data": {
+    "email": "xxxx@baidu.com",
+    "website": "http://www.baidu.com",
+    "email2": "yyyy@baidu.com",
+    "step": 2
+  }
+}
diff --git a/packages/amis/src/renderers/Wizard.tsx b/packages/amis/src/renderers/Wizard.tsx
index 1a75ec7d8..745e3ba21 100644
--- a/packages/amis/src/renderers/Wizard.tsx
+++ b/packages/amis/src/renderers/Wizard.tsx
@@ -286,37 +286,43 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
             );
           }
         })
-        .then(value => {
-          this.handleFetchInitEvent(value);
+        .then(result => {
+          this.handleFetchInitEvent(result);
 
           const state = {
             currentStep:
               typeof this.props.startStep === 'string'
-                ? toNumber(tokenize(this.props.startStep, this.props.data), 1)
+                ? toNumber(
+                    tokenize(
+                      this.props.startStep,
+                      createObject(this.props.data, result?.data || {})
+                    ),
+                    1
+                  )
                 : 1
           };
 
           if (
-            value &&
-            value.data &&
-            (typeof value.data.step === 'number' ||
-              (typeof value.data.step === 'string' &&
-                /^\d+$/.test(value.data.step)))
+            result &&
+            result.data &&
+            (typeof result.data.step === 'number' ||
+              (typeof result.data.step === 'string' &&
+                /^\d+$/.test(result.data.step)))
           ) {
-            state.currentStep = toNumber(value.data.step, 1);
+            state.currentStep = toNumber(result.data.step, 1);
           }
 
           this.setState(state, () => {
             // 如果 initApi 返回的状态是正在提交，则进入轮顺状态。
             if (
-              value &&
-              value.data &&
-              (value.data.submiting || value.data.submited)
+              result &&
+              result.data &&
+              (result.data.submiting || result.data.submited)
             ) {
               this.checkSubmit();
             }
           });
-          return value;
+          return result;
         });
     } else {
       this.setState({
diff --git a/scripts/mockApiPlugin.ts b/scripts/mockApiPlugin.ts
index c2ba286ce..e54424e2c 100644
--- a/scripts/mockApiPlugin.ts
+++ b/scripts/mockApiPlugin.ts
@@ -27,6 +27,22 @@ export default function mockApiPlugin(options: {} = {}): Plugin {
     enforce: 'pre' as 'pre',
     apply: 'serve' as 'serve',
     configureServer(server) {
+      // examples/index 页面，不处理会直接吐出 html 文件
+      server.middlewares.use('/examples/index', async (req, res, next) => {
+        if (req.originalUrl !== '/examples/index') {
+          next();
+          return;
+        }
+
+        let template = fs.readFileSync(
+          path.resolve(__dirname, '../index.html'),
+          'utf-8'
+        );
+        template = await server.transformIndexHtml('/index.html', template);
+        res.statusCode = 200;
+        res.end(template);
+      });
+
       server.middlewares.use('/api', (req, res, next) => {
         initExpress(req, res, next, () => {
           handler(req, res);