Merge pull request #2104 from 2betop/my-1.1.x

jssdk 支持 hash路由改造 to 1.1.x

docs/zh-CN/start/getting-started.md

@@ -83,6 +83,18 @@ SDK 版本适合对前端或 React 不了解的开发者，它不依赖 npm 及
 </html>
 ```
 
+### 更新属性
+
+可以通过 amisScoped 对象的 updateProps 方法来更新下发到 amis 的属性。
+
+```ts
+amisScoped.updateProps(
+  {
+    // 新的属性对象
+  } /*, () => {} 更新回调 */
+);
+```
+
 ### 切换主题
 
 jssdk 版本默认使用 `sdk.css` 即默认主题，如果你想用使用云舍，请改成引用 `cxd.css`。同时 js 渲染地方第四个参数传入 `theme` 属性。如：
@@ -100,6 +112,11 @@ amis.embed(
     theme: 'cxd'
   }
 );
+
+// 或者
+amisScoped.updateProps({
+  theme: 'cxd'
+});
 ```
 
 暗黑主题同理，改成引用 'dark.css' 同时主题设置成 `dark`。
@@ -179,27 +196,6 @@ let amisScoped = amis.embed(
 
 还可以通过 `amisScoped.getComponentByName('page1.form1').setValues({'name1': 'othername'})` 来修改表单中的值。
 
-### 切换主题
-
-jssdk 版本默认使用 `sdk.css` 即默认主题，如果你想用使用云舍，请改成引用 `cxd.css`。同时 js 渲染地方第四个参数传入 `theme` 属性。如：
-
-```js
-amis.embed(
-  '#root',
-  {
-    // amis schema
-  },
-  {
-    // 默认数据
-  },
-  {
-    theme: 'cxd'
-  }
-);
-```
-
-暗黑主题同理，改成引用 'dark.css' 同时主题设置成 `dark`。
-
 ### 多页模式
 
 默认 amis 渲染是单页模式，如果想实现多页应用，请使用 [app 渲染器](../../components/app)。
@@ -210,6 +206,14 @@ amis.embed(
 
 参考：https://github.com/baidu/amis/blob/master/examples/components/Example.tsx#L551-L575
 
+### 销毁
+
+如果是单页应用，在离开当前页面的时候通常需要销毁实例，可以通过 unmount 方法来完成。
+
+```ts
+amisScoped.unmount();
+```
+
 ## react
 
 初始项目请参考 <https://github.com/aisuda/amis-react-starter>。

examples/embed.tsx

@@ -1,6 +1,6 @@
 import './polyfills/index';
 import React from 'react';
-import {render as renderReact} from 'react-dom';
+import {render as renderReact, unmountComponentAtNode} from 'react-dom';
 import axios from 'axios';
 import {match} from 'path-to-regexp';
 import copy from 'copy-to-clipboard';
@@ -46,11 +46,15 @@ export function embed(
     ) {
       const disposition = response.headers['content-disposition'];
       let filename = '';
+
       if (disposition && disposition.indexOf('attachment') !== -1) {
-        let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/i;
-        let matches = filenameRegex.exec(disposition);
-        if (matches != null && matches[1]) {
-          filename = matches[1].replace(/['"]/g, '');
+        // disposition 有可能是 attachment; filename="??.xlsx"; filename*=UTF-8''%E4%B8%AD%E6%96%87.xlsx
+        // 这种情况下最后一个才是正确的文件名
+        let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)$/;
+
+        let matches = disposition.match(filenameRegex);
+        if (matches && matches.length) {
+          filename = matches[1].replace(`UTF-8''`, '').replace(/['"]/g, '');
         }
 
         // 很可能是中文被 url-encode 了
@@ -123,7 +127,7 @@ export function embed(
   };
 
   const responseAdaptor = (api: any) => (value: any) => {
-    let response = value.data;
+    let response = value.data || {}; // blob 下可能会返回内容为空？
     // 之前拼写错了，需要兼容
     if (env && env.responseAdpater) {
       env.responseAdaptor = env.responseAdpater;
@@ -155,26 +159,7 @@ export function embed(
     return result;
   };
 
-  renderReact(
-    <div className="amis-routes-wrapper">
-      <ToastComponent
-        position={(env && env.toastPosition) || 'top-right'}
-        closeButton={false}
-        timeout={5000}
-        theme={env?.theme}
-      />
-      <AlertComponent
-        theme={env?.theme}
-        container={() => env?.getModalContainer?.() || container}
-      />
-
-      {renderAmis(
-        schema,
-        {
-          ...props,
-          scopeRef: (ref: any) => (scoped = ref)
-        },
-        {
+  const amisEnv = {
     getModalContainer: () =>
       env?.getModalContainer?.() || document.querySelector('.amis-scope'),
     notify: (type: string, msg: string) =>
@@ -236,9 +221,7 @@ export function embed(
       to = normalizeLink(to);
 
       if (action && action.actionType === 'url') {
-              action.blank === false
-                ? (window.location.href = to)
-                : window.open(to);
+        action.blank === false ? (window.location.href = to) : window.open(to);
         return;
       }
 
@@ -284,7 +267,7 @@ export function embed(
 
       data && (config.data = data);
       let response = await axios(url, config);
-            response = attachmentAdpator(response);
+      response = await attachmentAdpator(response);
       response = responseAdaptor(api)(response);
 
       if (response.status >= 400) {
@@ -323,10 +306,43 @@ export function embed(
     richTextToken: '',
     affixOffsetBottom: 0,
     ...env
-        }
-      )}
-    </div>,
-    container
+  };
+
+  let amisProps: any = {};
+  function createElements(props: any): any {
+    amisProps = {
+      ...amisProps,
+      ...props,
+      scopeRef: (ref: any) => (scoped = ref)
+    };
+
+    return (
+      <div className="amis-routes-wrapper">
+        <ToastComponent
+          position={(env && env.toastPosition) || 'top-right'}
+          closeButton={false}
+          timeout={5000}
+          theme={env?.theme}
+        />
+        <AlertComponent
+          theme={env?.theme}
+          container={() => env?.getModalContainer?.() || container}
+        />
+
+        {renderAmis(schema, amisProps, amisEnv)}
+      </div>
     );
-  return scoped;
+  }
+
+  renderReact(createElements(props), container);
+
+  return {
+    ...scoped,
+    updateProps: (props: any, callback?: () => void) => {
+      renderReact(createElements(props), container as HTMLElement, callback);
+    },
+    unmount: () => {
+      unmountComponentAtNode(container as HTMLElement);
+    }
+  };
 }

src/store/app.ts

@@ -134,6 +134,11 @@ export const AppStore = ServiceStore.named('AppStore')
     },
 
     setActivePage(page: any, env: RendererEnv, params?: any) {
+      // 同一个页面直接返回。
+      if (self.activePage?.id === page.id) {
+        return;
+      }
+
       let bcn: Array<any> = [];
 
       findTree(self.pages, (item, index, level, paths) => {